如何使用多个条件和二维数组ReactJs进行过滤

如何解决如何使用多个条件和二维数组ReactJs进行过滤

我有一个数组，我想用多个条件过滤该数组。因此，我创建了两个下拉选择器以选择一种类别和一种价格。

我还创建了一个状态selectCategory和selectPrice，它们会通过下拉值进行更新，因此，如果我在类别选择器中选择“法国”，在价格选择器中选择“好”，那么我将拥有：

selectCategory: "France" selectPrice: "good"

我的目标现在也是遍历filterData并返回所有包含所选selectCategory和所选selectPrice的值。知道只能选择一个或同时选择两个，然后设置带有结果的数据。

import React,{useState,useEffect} from 'react'
const _ = require("lodash")

var filterData = [
    { product: 'Aang',category: ["France","German"],price: 'good'},{ product: 'Appa',{ product: 'Asami',{ product: 'Azula',"English"],price: 'bad'},{ product: 'Bolin',price: 'excelent'},{ product: 'Katara',"Serbia"],{ product: 'Korra',{ product: 'Jinora',{ product: 'Lin Beifong',{ product: 'Pabu',category: ['Engligh',"Spanish"],{ product: 'Momo',{ product: 'Mai',{ product: 'Mako',{ product: 'Naga',{ product: 'Sokka',{ product: 'Suki',{ product: 'Tenzin',"Russia"],{ product: 'Toph Beifong',{ product: 'Ty Lee',{ product: 'Uncle Iroh',{ product: 'Varrick',{ product: 'Zhu Li',{ product: 'Zuko',price: 'bad'}
  ];

  const Filter = () => {
        
    const [data,setData] = useState([])
    const [state,setState] = useState({
        selectCategory: "tous",selectPrice: "tous"
      })
      
      useEffect(() => {
        setData(filterData)
          return () => {
           
          }
      },[])
      const handleSearchBanner = e => {
    
        const value = e.target.value;
        setState({
          ...state,[e.target.id]: value
        });
        
      }

      const handleFilter = e => {
          var result = []
          if(state.selectCategory != "tous" && state.selectPrice != "tous"){
            filterData.map(item => {      
                item.category.map(categori => {
                    if(state.selectPrice !== "tous" && state.selectCategory !== "tous"){
                        if(categori === state.selectCategory && item.price ===  state.selectPrice){
                            result.push(item)
                        }
                    } 
                })        
            })
        }if(state.selectCategory === "tous" && state.selectPrice !== "tous"){  
            result = _.filter(filterData,{'price' : state.selectPrice})
        }if(state.selectCategory !== "tous" && state.selectPrice === "tous"){  
            _.filter(filterData,function(o) { o.category.map( categori => {
                
                if(categori === state.selectCategory){

                    console.log(o)
                    result.push(o)

                }
            })});
        }
        
        // console.log("filtered",filtered)
          setData(result)
        
      }
     
      
      return(
          <div>
              <select onInput={handleSearchBanner}  id="selectCategory" onChange={handleFilter}>
                  <option value="tous">tous</option>
                  <option value="France">france</option>
                  <option value="Spanish">Spanish</option>
                  <option value="Russia" >Russia</option>
                  <option value="Serbia" >Serbia</option>
                  <option value="German" >german</option>
              </select>

              <select onInput={handleSearchBanner} id="selectPrice" onChange={handleFilter}>
                  <option value="tous">tous</option>
                  <option value="bad">bad</option>
                  <option value="good">good</option>
                  <option value="excelent">excelent</option>                  
              </select>
              <div>
              {data.map(option => {
                  return <p>{option.product}</p>
              })}
              </div>
          </div>
      )
  }


  export default Filter