reactjs - 如何解决 ReactJS 中超出的更新深度

Question

所以这就是我想要做的。我有一个在名为 classes 的状态下维护的对象列表，每个对象都有一个变量“已保存”，初始化为 0。我从 restAPI 获取另一个列表并将其存储在名为 savedIds 的状态中（每个项目都有两个变量 'class_details '和'id'）。类中的每个项目也有一个变量 id，我想看看这个 id 是否与任何 savedIds 对象的 class_detail 变量匹配。如果是这样，那么我想将 classes 对象的“已保存”变量更改为该 savedIds 对象的 id 变量。

我正在尝试像这样使用 useEffect 来做到这一点-->

    useEffect(() => {
        classes.forEach((i, idx) => {
            savedIds.forEach((j) => {
                if (j.class_details === i.id) {
                    setClasses((classes) => [
                        ...classes.slice(0, idx),
                        {
                            ...classes[idx],
                            saved: j.id,
                        },
                        ...classes.slice(idx + 1),
                    ]);
                }
            });
        });
    }, [savedIds,classes]);

我收到以下警告-->

index.js:1 警告：超出最大更新深度。当组件在 useEffect 中调用 setState 时，可能会发生这种情况，但 useEffect 要么没有依赖数组，要么每次渲染时依赖项之一发生变化。

这似乎是由 classes 数组引起的，但我不明白为什么以及如何解决它。任何帮助，将不胜感激。

标签： reactjsuse-effectuse-state