Question

如何过滤具有多个值的数组？| React

2021-12-18

3658

arrays reactjs filter use-state

晚上好，

我有一个电影列表/数组，需要使用两个值（已发布和类别）进行过滤。当前代码允许用户过滤同时选择了这两个值的电影。但是我想解决的问题是，如果；

例如，用户选择“动作”，它应该返回所有带有动作类别的电影。
或者另一种情况，用户选择“1999”，显示该年发布的所有电影。
它也不应该失去当前的功能，因为我想允许用户过滤单个值和组合值。

当前代码在这里： https://codesandbox.io/s/focused-sun-2lkfx?file=/src/App.js

我已经看到了过滤特定值的示例，但是在用户可以指定某些内容并向其添加另一个过滤器的场景中，我不知道如何处理它。

Answer 1

您在 useEffect 中搞乱了一些东西，覆盖了结果变量。

我已在 sandbox fork 中为您修复了这个问题。

  useEffect(() => {
    //Filter options updated so apply all filters here
    const result = array
      .filter((item) =>
        filterCategory.length ? filterCategory.includes(item.category) : item
      )
      .filter((data) =>
        filterPublished.length ? filterPublished.includes(data.published) : data
      );

    setFilteredArray(result);
  }, [filterPublished, filterCategory]);

Answer 2

下面是一个如何使用 2 个值过滤数组的示例。

我还分叉了沙盒示例。 https://codesandbox.io/s/nifty-benji-p0n9m?file=/src/App.js

现在它应该可以按预期工作了。

movies.filter((movie) => {
  return (
    isDateSelected(movie, filterPublished) &&
    isCategorySelected(movie, filterCategory)
  );
});