使用空依赖关系进行多次渲染

Question

我一直认为带有空依赖项的useEffect只渲染一次。这是我的代码片段，但它呈现了2次：

useEffect(() => {
        let entryDataArray = [];
        for (let i = 0; i < days; ++i) {
            let entryData = [];
            let entries = eventEntryList[i];
            console.log('entries = ', entries);
            for (var j = 0; j < entries.length; ++j) {
                console.log('j = ', j);
                console.log('entries[j] 1111111 = ', entries[j]);
                if (entries[j].runGroup[i] === NOT_ATTENDING) {
                    continue;
                }
                console.log('entries[j] 2222222 = ', entries[j]);
                let entry = {
                    lastName: entries[j].userLastName,
                    firstName: entries[j].userFirstName,
                    email: entries[j].email,
                    carNumber: entries[j].carNumber,
                    paymentMethod: entries[j].paymentMethod,
                    entryFee: entries[j].entryFee,
                    paymentStatus: entries[j].paymentStatus ? 'Paid' : 'Unpaid'
                };
                entryData.push(entry);
            }
            entryDataArray.push(entryData);
        }
        setEntryListArray(entryDataArray);
        setShowLoading(false);
    }, []);

控制台输出显示它渲染了2次。第一次，for循环按其预期工作——“continue”在“if（entries[j].runGroup[i]==NOT_attenting”下工作。第二次，“继续”未执行。

我错过什么了吗？

Answer 1

我以为你在开发模式下运行你的应用程序，对吗？。在开发模式下，每次进行更改时，它都会在每次对代码进行更改时重新加载组件。

Answer 2

需要明确的是：每次装载组件时，都会运行带有空依赖项数组的useEffect。如果您意外地卸下并重新安装了组件，则这可能不止一次。

首先确保你不在StrictMode中，因为这在严格模式下是意料之中的。

如果您未处于严格模式，请在useEffect中包含一个返回函数，该函数将在每次卸载时运行，以检测组件是否正在卸载。

useEffect(() => {

     // your code

    return () => {
    // will run on every unmount.
     console.log("component is unmounting");
    }

}, [])