如何过滤具有多个值的数组？ |反应答案

【问题标题】：How to filter an array with multiple values? | React如何过滤具有多个值的数组？ |反应
【发布时间】：2022-01-21 04:49:47
【问题描述】：

晚上好，

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

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

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

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

【问题讨论】：

标签： arrays reactjs filter use-state

【解决方案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]);

【讨论】：

【解决方案2】：

这是一个示例，说明如何过滤具有 2 个值的数组。

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

现在它应该可以正常工作了。

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

【讨论】：