javascript - 带有 React useState Hook 的复选框表过滤器 - 将数组映射到过滤表

Question

我正在尝试使用 React Hook 为 Material Ui 表实现复选框过滤器。我的目标是映射过滤值数组，如果行对象与任何过滤值匹配，则过滤表数据。

例如，如果我选择/检查 2 个过滤器值，我想将过滤器值与相应的行对象属性进行比较，如果属性与过滤器值之一匹配，则将行数据添加到新数组。

下面是我的进度。

Table.js

 // Set state using useState hook
 const [filter, setFilter] = React.useState(null);

 // Table data
 tableData = [
   {color: 'red', type:'fruit', name:'apple'},
   {color: 'blue', type:'fruit', name:'blueberry'},
   {color: 'green', type:'veg', name:'lettuce'},
   {color: 'green', type:'veg', name:'celery'},
 ]

 // Pull unique colors from global state
 const uniqueColors = [...new Set(arr.map(item => item.color))]; // [red, blue, green]

 // Handle checkbox filtering ... this is where I'm running into issues
 function handleSelectFilter(option, checked) {
    if(checked){
      setFilter(option); // add option to filter array
      let filterArr = tableData.filter(row => row.color == option);
    }else{
      //if unchecked, remove from filterArr and unfilter the table
      let filterArr = tableData.filter(row => row.color !== option);
      setFilter(filterArr);
    }
  }

  ...

  return (
   ...
    <Grid>
     <FilterPopOver 
      options={uniqueColors}
      onSelectFilter={handleSelectFilter}
     />
    </Grid>
   ...
)

FilterPopover.js: onChange -- FilterPopover 组件只发送 handleSelectFilter() 已更改的值，以及是否已选中或未选中(例如，(red, true))

期望的输出

 filterArr=['red','green']

 tableData = [
   {color: 'red', type:'fruit', name:'apple'},
   {color: 'green', type:'veg', name:'lettuce'},
   {color: 'green', type:'veg', name:'celery'},
 ]

Answer 1

您可以使用 includes()检查所选过滤器数组中是否存在项目颜色的方法。

实例:

var tableData = [
   {color: 'red', type:'fruit', name:'apple'},
   {color: 'blue', type:'fruit', name:'blueberry'},
   {color: 'green', type:'veg', name:'lettuce'},
   {color: 'green', type:'veg', name:'celery'},
 ];
 
function filterData(tableData, filters) {
  return tableData.filter(item => filters.includes(item.color));
}

console.log(filterData(tableData, ['red', 'green']));

从你的问题来看，不清楚 setFilter() 做了什么，但你可以如下所示:

function handleSelectFilter(option, checked) {
  if(checked) {
    // Add option to filter array.
    this.filterArr.push(option);
  } else {
    // Remove option from filter array.
    this.filterArr = this.filterArr.filter(color => color !== option);
  }

  // Filter table data.
  this.tableData = this.tableData.filter(item => filterArr.includes(item.color));
}