react-table-v6搭配react-select筛选失效，选中选项后表格为空求助

问题场景 #

必须使用react-table-v6，搭配react-select多选组件实现表格筛选，但选中选项后表格直接变空，筛选功能完全失效。

现有实现代码 #

react-select组件

<Select
    onChange={handleChange}
    isMulti
    options={options}
/>

选项变更处理函数

const handleChange = v => {
  setSelectedOptions(v);
  console.log('handleChange value :', v);
};

生成select选项列表

const options = tags.map((i) => ({
  value: i,
  label: i,
}));

选中选项扁平化处理

const flatenSelectedOption = selectedOption?.map(item => item?.value).flat();

选中后的数据示例

// 从select拿到的选中数据
choosenOptionsFromselect: [
  {value: 'Country', label: 'Country'},
  {value: 'Carrier', label: 'Carrier'}
]

// 扁平化后的结果
flatenSelectedOption : ['Country', 'Carrier']

表格筛选逻辑

const sortedTableByTags = tableData.filter((item) =>item.tags?.name?.includes(flatenSelectedOption));

ReactTable数据源配置

<ReactTable
     data={(selectedOption?.length === 0 || selectedOption == null) ? tableData : sortedTableByTags}
/>

问题原因 #

筛选逻辑里的includes用法错误：item.tags?.name?.includes(flatenSelectedOption)中，flatenSelectedOption是数组，但includes方法只接受单个值作为参数。这种写法只有当item.tags.name完全等于这个数组时才会返回true，几乎不可能命中，所以筛选结果为空数组，表格就没数据了。

修复方案 #

根据你的业务需求选下面一种逻辑：

1. 匹配「包含任意一个选中选项」的数据

只要数据的tags.name包含选中选项里的任意一个，就保留：

const sortedTableByTags = tableData.filter((item) => {
  if (!item.tags?.name) return false;
  return flatenSelectedOption.some(option => item.tags.name.includes(option));
});

2. 匹配「包含所有选中选项」的数据

只有当数据的tags.name包含所有选中的选项时，才保留：

const sortedTableByTags = tableData.filter((item) => {
  if (!item.tags?.name) return false;
  return flatenSelectedOption.every(option => item.tags.name.includes(option));
});

额外优化点 #

1. 扁平化数组的flat()可以删掉，map返回的已经是一维数组，同时加个空数组兜底避免报错：

   const flatenSelectedOption = selectedOption?.map(item => item?.value) || [];
   

2. ReactTable的数据源判断可以简化：

   <ReactTable
     data={selectedOption?.length ? sortedTableByTags : tableData}
   />
   

内容的提问来源于stack exchange，提问作者CodeBee