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

Question

晚上好，

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

一个用户 select 例如“动作”，它应该 return 所有带有动作类别的电影。
或者用户select“1999”的另一个场景，显示当年发布的所有电影。
它也不应该失去当前的功能，因为我想让用户过滤单个值和组合值。

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

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

Answer 1

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

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

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

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

Answer 2

你在 useEffect 中搞砸了，覆盖了 result 变量。

我已经在 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]);

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

How to filter an array with multiple values? | React

arrays

filter

reactjs

use-state