使用 react-select 过滤 react-table-v6 的问题

Question

所以我必须使用 react table v6。在桌子下面我用的是react-select。但是当我尝试过滤表中的数据时出现了问题。它只是行不通。我将向您展示我正在使用的请求女巫的示例。以及我如何尝试过滤表格中的数据。

这是我的反应选择，我在其中提供选项和 chanhleChange fn：

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

这里是 handleChange fn:

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

要使用 react-select 库在 select 中提供选项，您需要这个技巧（我不知道为什么这么难......）。

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

在这里我将本地状态 selectedOption 展平，因为我想将它用作“includes”方法中的值

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

在选择中选择后，数据看起来像，这就是为什么我使用 flatenSelectedOption 将它们扁平化的原因：

choosenOptionsFromselect: [
  0: {value: 'Country', label: 'Country'}
  1: {value: 'Carrier', label: 'Carrier'}
]

flatenSelectedOption : (2) ['Country', 'Carrier']

然后在这里我尝试根据选择中的值过滤表。

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

然后这里是简单的规则。我从 select 中选择了一些值，如果不显示所有数据，我们应该使用过滤数组。

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

但是排序不会发生，当我从选择中选择一些东西时，我得到一个空表 如果你点击下面的链接，你可以看到一个小的 gif 和控制台的屏幕截图

Gif - 选择作品