React useEffect 导致无限循环 - 需要帮助解决问题

Question

我有这个 useEffect 挂钩和几个执行特定任务的按钮，所有按钮都工作正常，但清除 btn 会导致无限警告。 这是警告 警告：超出最大更新深度。当组件在 useEffect 内调用 setState，但 useEffect 没有依赖项数组，或者依赖项之一在每次渲染时发生更改时，就会发生这种情况。

我正在创建一个待办事项列表应用程序，因为我是反应初学者，我正在自己练习这个项目，这是代码

let finalArr = arr;
const [renderAgain, setRenderAgain] = useState(() => returnTodos(finalArr));
useEffect(() => {
    if (btn === "clr") {
        deleteCompleted();
    } else if (btn === "act") {
        finalArr = findUniqueElements(arr, finishArr);
    } else if (btn === "com") {
        finalArr = finishArr;
    } else {
        console.log("all");
        finalArr = arr;
    }
    const newRenderAgain = returnTodos(finalArr);
    setRenderAgain(newRenderAgain);
}, [arr, finishArr, btn]);

function deleteCompleted() {
    finalArr = findUniqueElements(arr, finishArr);
    setArr(finalArr);
    setFinishArr([]);
}

我的 GitHub 存储库链接：https://github.com/ayussh-2/React-To-do-list

解决这些问题就可以了

Answer 1

当 btn === "clr" 时，你的 useEffect 调用 deleteCompleted，这会用

setArr(finalArr);

和

setFinishArr([]);

更改 arr 和 finishArr，并且由于 arr 和 finishArr 是 useEffect 中的依赖项，useEffect 将再次运行，并无限重复。

一个快速解决方法是重置 btn。

if (btn === "clr") {
   setBtn('');
   deleteCompleted();
}

此外，根据您的 useEffect

 中的内容，此行 

const [renderAgain, setRenderAgain] = useState(() => returnTodos(finalArr));

 应该是 

const [renderAgain, setRenderAgain] = useState(returnTodos(finalArr));