Question

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

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

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

JSON示例（我正在尝试按genre_ids进行过滤：

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来完成： / p>

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语句之后，具体取决于您的使用方式）。

组合过滤器和包括过滤多个值

1 个答案: