即使存在第二个依赖项,也会发生 useEffect 无限循环

时间:2021-07-08 10:26:57

标签: reactjs state use-effect

const [hanziList, sethanziList] = useState([]);

const [whetherFinish, setWhetherFinish] = useState()

const inspectCheckboxList = () => {

        var i = 0;
        while (i < hanziList.length) {
            if (hanziList[i].memorize === 0) {
                setWhetherFinish("notFinish")
                break;
            }
            if (hanziList[i].memorize === 1) {
                i = i + 1;
            }
            if (i === hanziList.length) {
                setWhetherFinish("finish")
            }
                console.log(whetherFinish)
        }
    }

    useEffect(() => { inspectCheckboxList(); }, [hanziList]);

hanziList 是一个来自 MySQL 的对象,它是一个中文词汇列表。在 List 上,如果我选中复选框,则 memorize 的值变为 1。因此,0 表示未记住,1 表示已记住。

如果我选中所有复选框,则表示我已经记住了列表中的所有词汇,因此按钮的 className 从“notFinish”变为“finish”。

为了检查它是否“完成”,我做了一个函数inspectCheckboxList。每次 memorize 的值发生变化时,通过 useEffect 渲染函数。

我发现将 state 放入 useEffect 是一种解决问题的方法,但对我来说是不可能的。

我不知道为什么会出现无限循环,因为通过 useEffect,该函数仅在网站第一次加载时呈现,并且 memorize (in this case, hanziList`) 的值发生变化。

我认为这是因为内部函数结束了hanziList,而第二个依赖也是hanziList

为什么会出现死循环,即使设置了第二个依赖,如何解决?

0 个答案:

没有答案