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

Question

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

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

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

示例 JSON（我正在尝试按 genre_ids:

进行过滤

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

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

我创建了一个 stackblitz 来展示事物的当前状态： https://react-sxyyfp.stackblitz.io

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

Answer 1

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

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

如果您电影中的单个 id 也在用户指定的过滤器中，some 将 return true.

编辑

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

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

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

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

Combining filter and includes to filter multiple values

javascript

arrays

filter

include

reactjs