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

rqqzpn5f  于 2023-03-12  发布在  React
关注(0)|答案(1)|浏览(140)

所以我必须使用react表v6。在表下面我使用react-select。但是当我尝试过滤表中的数据时,出现了一些问题。它就是不起作用。我将向您展示我正在使用的request wich的示例。以及我是如何尝试过滤表中的数据的。
这是我的React-选择,我提供了选项和chanhleChange fn:

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

下面是handleChange fn:

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

要在select中提供带有react-select库的选项,需要使用这个技巧(我不知道为什么这么难...)。

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

这里我将局部状态selectedOption扁平化,因为我想将其用作“includes”方法中的值

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

在select中选择后,数据看起来像这样,这就是为什么我使用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和控制台console.log screenshot的屏幕截图。
Gif - Select work

9bfwbjaz

9bfwbjaz1#

所以伙计们,我解决了我自己的排序问题。它帮助我对表中的数据进行排序。

const sortedTableByTags = useMemo(() => tableData.filter((item) => item?.tags?.filter(i => i?.name?.includes(selectedOption))), [tableData, selectedOption]);

我做的第二个改进是将onChange选择函数更改为。

const handleSelectChange = v => {
  const res = v?.map(item => item.label);
  setSelectedOptions(res);
};

相关问题