结合过滤器和包含过滤多个值

Question

我正在尝试通过过滤掉当前状态中的值来创建新状态。

        // Create new state
        const defaultState = [...this.state.defaultData];
        newState = defaultState.filter(movies => !filteredItems.includes(movies.genre_ids));

我认为我的问题可能是遍历到子对象数组，因为当我这样做时，我只得到一个空白结果。

示例 JSON（我正在尝试按流派 ID 过滤：

https://api.themoviedb.org/3/movie/now_playing?api_key=39b616a19667f17d8ffcaa175fc93491&language=en-US&page=1

我已经尝试过对值进行硬编码，但这是行不通的。但是，我确实尝试使用相同的方法按标题过滤，并对标题进行硬编码，这确实有效。因此，为什么我认为可能是我进入genre_ids 的问题？

我创建了一个堆栈闪电战来显示当前的状态： https://react-sxyyfp.stackblitz.io

预期结果是，当您选中多个复选框，然后取消选中以删除该特定过滤器时，仍会应用当前活动的过滤器。

Answer 1

由于movies.genre_ids 是您提供的链接中的一个数组，我建议遍历其中的每个id 并检查是否有一个对应，这可以使用some 来完成：

const defaultState = [...this.state.defaultData];
newState = defaultState.filter(movies => movies.genre_ids.some(genre => !filteredItems.includes(genre)));

如果您的电影中的单个id 也在用户给定的过滤器中，则some 将返回true。

---

编辑

在此处更新您的状态的适当方法是使用setState 的回调版本并使用您之前的状态来更改新的状态：

this.setState(prev => ({
    defaultData: prev.defaultData.filter(movies => movies.genre_ids.some(genre => !filteredItems.includes(genre)));
}))

我猜你是从外部来源获取这些数据。 如果是这样，您应该在componentDidMount 函数中获取您的数据，并在收到数据后立即设置状态（在then 函数内或await 语句之后，具体取决于您喜欢哪种方式）。