React JS中使用动态条件如何过滤
#javascript #动态 #过滤器 #multiplefilterconditioninreact

假设您有一个JSON数组，您的任务需要用六种不同类型的值动态过滤数组。这些值将动态存储到JSON对象中。如果对象值更改您需要推动新条件。

我的工作过程：

  1. 声明一个阵列，我们可以推动我们的条件。
  2. 如果条件匹配，则将新条件推入该数组。
  3. 然后过滤数据并使用每个功能检查每个条件 
const [formdata, setFormdata] = useState({});

##handle onchange
setFormdata({ ...formdata, 
            [e.target.name]: e.target.value 
           });

let conditions = []
if (formdata.geography) {
    conditions.push(function (item) {
        return item.geography === formdata.geography;
      });
  };

if (formdata.traffic_type) {
    conditions.push(function (item) {
     return item.trafficType === formdata.traffic_type;
        });
  };

  if (formdata.task_type) {
      conditions.push(function (item) {
         return item.taskType === formdata.task_type;
     })
 };

 if (formdata.status_type) {
     conditions.push(function (item) {
         return item.statusType === formdata.status_type;
     })
}

 if (formdata.rev_type){
    conditions.push(function (item) {
        return item.revType === formdata.rev_type;
    })
}

if (formdata.device_type){
   conditions.push(function (item) {
       return item.deviceType === formdata.device_type;
   })
}

 const itemsMatchingCondition = campaigns.filter(d => 
                                conditions.every(c => c(d)));

console.log(itemsMatchingCondition);

注意：如果您有任何问题，请随时敲我。我很高兴与您贡献。