Javascript 针对多个选择下拉列表筛选表react的状态逻辑

我正在尝试一种过滤策略。我想根据选定的值筛选我的表。默认情况下，应根据选择中的“全部”选项选择所有值。我试图实现一个过滤逻辑，但我确信我做得不对，因为过滤在某些情况下不起作用。 这里应用过滤的正确方法是什么。谢谢下面是我尝试的示例：

const App = () => {
    const [moduleSelected, setModuleSelected] = useState({value:'all'});
    const [variableSelected, setVariableSelected] = useState({value:'all'});
    const [valueSelected, setValueSelected] = useState({value:'all'});
    const [periodSelected, setPeriodSelected] = useState({value:'all'});
        const variables = [
        {id:"all", variable:"all"},{id:"subdomain", variable:"subdomain"}, {id:"category", 
         variable:"category"}];
    const valid = [
        {id:"all", variable:"all"},{id:"true", variable:"true"}, {id:"false", variable:"false"}];
...
const handleModuleChange = e => {
        console.log('module', e.target.value)
        setModuleSelected({value : e.target.value})
    }

    const handleVariableChange = e => {
        console.log('variable', e.target.value)
        setVariableSelected({value : e.target.value})
    }

    const handlePeriodChange = e => {
        console.log('period', e.target.value)
        setPeriodSelected({value : e.target.value})
    }

    const handleValueChange = e => {
        let boolvalue = Boolean
        e.target.value == 'true'? boolvalue = true:
        e.target.value == 'false'? boolvalue = false:
        boolvalue=null
        console.log('value', boolvalue, typeof boolvalue)
        setValueSelected({value : boolvalue})
    }

    let filteredComparables = [];
    moduleSelected.value === 'all' || variableSelected.value === 'all'||
    valueSelected.value ==='all' || periodSelected.value === 'all'?
        filteredComparables = new_comparables
        :filteredComparables = new_comparables.filter(comparable => (
            comparable.module == moduleSelected.value !== 'all'
            &&comparable.table == variableSelected.value !== 'all'
            &&comparable.is_valid == valueSelected.value !== 'all'
            &&comparable.period == periodSelected.value !== 'all'))
...

 return (
           <div>
              <select onChange={e => handleModuleChange(e)}>
                 {modules_data.map((obj) => {
                        return(
                            <option value={obj.variable}>{obj.variable}</option>
                         )
                  })}
              </select>
              <select onChange={e => handlePeriodChange(e)}>
                  <option value ="all">all</option>
                  {Array.from(new Set(new_comparables.map(obj => obj.period))).map(period => {
                       return <option value={period}>{period}</option>
                  })}
              </select>
              <select onChange={e => handleValueChange(e)}>
                 {valid.map((obj) => {
                       return <option value={obj.id}>{obj.variable}</option>
                 })}
              </select>
              <select onChange={e => handleVariableChange(e)}>
                 {variables.map((obj) => {
                       return <option value={obj.id}>{obj.variable}</option>
                 })}
              </select>
           </div>
...

const-App=（）=>{
const[moduleSelected，setModuleSelected]=useState（{value:'all'}）；
const[variableSelected，setVariableSelected]=useState（{value:'all'}）；
const[valueSelected，setValueSelected]=useState（{value:'all'}）；
const[periodSelected，setPeriodSelected]=useState（{value:'all'}）；
常量变量=[
{id:“all”，变量：“all”}，{id:“subdomain”，变量：“subdomain”}，{id:“category”，
变量：“类别”}]；
常量有效=[
{id:“all”，变量：“all”}，{id:“true”，变量：“true”}，{id:“false”，变量：“false”}]；
...
常量handleModuleChange=e=>{
console.log（'module'，e.target.value）
setModuleSelected（{value:e.target.value}）
}
常量handleVariableChange=e=>{
console.log（'variable'，e.target.value）
setVariableSelected（{value:e.target.value}）
}
常量handlePeriodChange=e=>{
console.log（'period'，e.target.value）
setPeriodSelected（{value:e.target.value}）
}
常量handleValueChange=e=>{
设布尔值=布尔值
e、 target.value='true'？布尔值=true：
e、 target.value='false'？布尔值=false：
布尔值=null
log（'value'，布尔值，布尔值类型）
setValueSelected（{value:boolvalue}）
}
让filteredComparables=[]；
moduleSelected.value=='all'| | variableSelected.value=='all'||
valueSelected.value=='all'| | periodSelected.value=='all'？
filteredComparables=新的可比数据
：filteredComparables=新的\u可比项。filter（可比项=>(
compariable.module==moduleSelected.value！=='all'
&&Compariable.table==variableSelected.value！===“全部”
&&compariable.is_valid==valueSelected.value！=='all'
&&comparable.period==periodSelected.value！==“all”））
...
返回(
handleModuleChange（e）}>
{modules_data.map（（obj）=>{
返回(
{obj.variable}
)
})}
handlePeriodChange（e）}>
全部的
{Array.from（新的集合（新的_compariables.map（obj=>obj.period）））.map（period=>{
返回{period}
})}
handleValueChange（e）}>
{valid.map（（obj）=>{
返回{obj.variable}
})}
handleVariableChange（e）}>
{variables.map（（obj）=>{
返回{obj.variable}
})}
...

假设您有表中所示的items数组：

0-初始化：

A:const [originalItems, null] = useState([{...},{...},etc...]);
B:const [filteredItems, setFilteredItems] = useState([{...},{...},etc...]);

1-过滤器：

const [filters, setFilters] = useState([{name:'field1',value:'all'},etc...]);

2-处理更改： 假设您有一些下拉列表：

    A: onChange={(txt)=>handleChange('field1',txt)}

    B:handleChange(name,val){
    setFilters([...filters,{name,value}]);
    let items = [...originalItems];
    for(let i=0;i<filters.length;i++){
       items = items.filter(x=>x[filters[i]] === val);//condition to pass
    }
       setFilteredItems([...items ]);
    }

A:onChange={（txt）=>handleChange（'field1'，txt）}
B:handleChange（名称，val）{
setFilters（[…filters，{name，value}]）；
let items=[…originalItems]；
for（设i=0；ix[filters[i]]==val）；//要传递的条件
}
setFilteredItems（[…项]）；
}

在上面的代码中，您可以将条件更改为pass 3-使用以下过滤项：

filteredItems.map(item=>(<div>
//what ever ui is?
</div>))

filteredItems.map（项=>(
//用户界面到底是什么？
))

假设您有表中所示的items数组：

0-初始化：

A:const [originalItems, null] = useState([{...},{...},etc...]);
B:const [filteredItems, setFilteredItems] = useState([{...},{...},etc...]);

1-过滤器：

const [filters, setFilters] = useState([{name:'field1',value:'all'},etc...]);

2-处理更改： 假设您有一些下拉列表：

    A: onChange={(txt)=>handleChange('field1',txt)}

    B:handleChange(name,val){
    setFilters([...filters,{name,value}]);
    let items = [...originalItems];
    for(let i=0;i<filters.length;i++){
       items = items.filter(x=>x[filters[i]] === val);//condition to pass
    }
       setFilteredItems([...items ]);
    }

A:onChange={（txt）=>handleChange（'field1'，txt）}
B:handleChange（名称，val）{
setFilters（[…filters，{name，value}]）；
let items=[…originalItems]；
for（设i=0；ix[filters[i]]==val）；//要传递的条件
}
setFilteredItems（[…项]）；
}

在上面的代码中，您可以将条件更改为pass 3-使用以下过滤项：

filteredItems.map(item=>(<div>
//what ever ui is?
</div>))

filteredItems.map（项=>(
//用户界面到底是什么？
))

我花了一段时间才弄明白如何在不更改所用逻辑的情况下执行筛选。我意识到我执行筛选是错误的。因此，我没有使用以下语法：

comparable.module == moduleSelected.value !== 'all'

我决定改为使用if-else语句（三元运算符）来消除： 下面的代码检查是否

moduleSelected.value！==“all”

，否则将传递一个空块

{}

，在这种情况下，这相当于在Python中执行

pass

moduleSelected.value !== 'all'?comparable.module == moduleSelected.value:{}

总体而言：

let filteredComparables = [];
moduleSelected.value === 'all' || variableSelected.value === 'all'||
valueSelected.value ==='all' || periodSelected.value === 'all'?
    filteredComparables = new_comparables
    :filteredComparables = new_comparables.filter(comparable => (
        comparable.module == moduleSelected.value !== 'all'
        &&comparable.table == variableSelected.value !== 'all'
        &&comparable.is_valid == valueSelected.value !== 'all'
        &&comparable.period == periodSelected.value !== 'all'))

变成：

let filteredComparables = [];
    filteredComparables = new_comparables.filter(comparable => (
        (moduleSelected.value !== 'all'?comparable.module == moduleSelected.value:{})
        &&(variableSelected.value !== 'all'?comparable.table == variableSelected.value:{})
        &&(valueSelected.value !== 'all'?comparable.is_valid == valueSelected.value:{})
        &&(periodSelected.value !== 'all'?comparable.period == periodSelected.value:{})))

---

我花了一段时间才弄清楚如何在不更改所用逻辑的情况下执行筛选。我意识到我执行筛选是错误的。因此，我没有使用以下语法：

comparable.module == moduleSelected.value !== 'all'

我决定改为使用if-else语句（三元运算符）来消除： 下面的代码检查是否

moduleSelected.value！==“all”

，否则将传递一个空块

{}

，在这种情况下，这相当于在Python中执行

pass

moduleSelected.value !== 'all'?comparable.module == moduleSelected.value:{}

总体而言：

let filteredComparables = [];
moduleSelected.value === 'all' || variableSelected.value === 'all'||
valueSelected.value ==='all' || periodSelected.value === 'all'?
    filteredComparables = new_comparables
    :filteredComparables = new_comparables.filter(comparable => (
        comparable.module == moduleSelected.value !== 'all'
        &&comparable.table == variableSelected.value !== 'all'
        &&comparable.is_valid == valueSelected.value !== 'all'
        &&comparable.period == periodSelected.value !== 'all'))

变成：

let filteredComparables = [];
    filteredComparables = new_comparables.filter(comparable => (
        (moduleSelected.value !== 'all'?comparable.module == moduleSelected.value:{})
        &&(variableSelected.value !== 'all'?comparable.table == variableSelected.value:{})
        &&(valueSelected.value !== 'all'?comparable.is_valid == valueSelected.value:{})
        &&(periodSelected.value !== 'all'?comparable.period == periodSelected.value:{})))