使用 setFilter 在 react-table 中设置多个过滤器答案

【问题标题】：Set multiple filters in react-table using setFilter使用 setFilter 在 react-table 中设置多个过滤器
【发布时间】：2022-11-01 17:47:23
【问题描述】：

是否可以使用 setFilter 过滤多个值？这会过滤年龄列中的任何“31”实例：

useEffect(() => {
  setFilter("age", "31");
});

我尝试添加一个数组，但它不起作用：

useEffect(() => {
  setFilter("age", ["31", "32"]);
});

【问题讨论】：

标签： reactjs react-table

【解决方案1】：

是的。您可以将包括多个值（数组）在内的任何值传递给设置过滤器二传手。正如here所写：

setFilter: Function(columnId, filterValue) => void
filterValue: any

但是，我们必须确保：

该设置过滤器通过使用从表实例中检索 setter使用表和使用过滤器钩子：

const {
 ...
 setFilter,
 ...
} = useTable(
 {
   columns,
   data,
 },
 useFilter
);

自定义过滤器进程过滤器值正确，因此它将返回预期的结果：

function multiSelectFilter(rows, columnIds, filterValue) {
  // beware of "31".includes(1) and ["31", "32"].includes(1)
  // this method will return a different value if you passed in a different value data type.
  return filterValue.length === 0
    ? rows
    : rows.filter((row) => filterValue.includes(row.original[columnIds]));
}

自定义过滤器附加到列对象及其ID：

columns: [
  {
    Header: "Age",
    accessor: "age",
    id: "age",
    filter: multiSelectFilter    // <--- put it here
  },
]

然后你可以在你的桌子上使用过滤器，如下所示：

  function Table({ columns, data, filteredAges }) {

    const {
      ...
      setFilter,
      ...
    } = useTable(
      {
        columns,
        data,
      },
      useFilter
    );
    ...

    useEffect(() => {
      if (filteredAges) {
        setFilter("age", filteredAges);
      }
    }, [filteredAges, setFilter]);

    ...

    return (
      ...
    )
  }

这是示例：

【讨论】：