在 useEffect 中反應永無止境的循環

Question

道歉。 在這里反應菜鳥。

遇到一個問題，我的代碼卡在一個永無止境的循環中。 我只將代碼剝離到我認為導致問題的部分。

function Packages(){

    const [packages, setPackages] = useState([]);

    useEffect(() => {
        if(!packages){
            getPackages();
        }
    });

    const getPackages = async () => {
        const resp1 = await instance.get('https://jsonplaceholder.typicode.com/todos/1');
        setPackages(resp1);
    };
}

我已經使用useEffect方法來匹配 componentDidMount。 那是對的嗎？

我評論“setPackages(resp1);”的那一刻永無止境的循環停止。 我可能使用錯誤的 useEffect 和 useState 掛鈎。

感謝您對此的任何指導。

Answer 1

如果你沒有將第二個參數傳遞給useEffect鈎子，它將在每次你的組件重新渲染時執行。

如果您只想在組件掛載后獲取一次數據，則將一個空的依賴數組傳遞給useEffect掛鈎。

useEffect(() => {
   if(!packages){
       getPackages();
   }
}, []);

這樣做將修復useEffect鈎子的無限執行，但現在 React 將拋出有關缺少useEffect鈎子依賴項的警告，這是因為您需要在useEffect鈎子的依賴項數組中添加 function getPackages但是這也會導致無限執行useEffect掛鈎。

您有兩種選擇來解決此問題：

1. 擺脫getPackages function 並將其代碼移動到useEffect掛鈎中

   useEffect(() => { if(.packages){ (async () => { const resp1 = await instance.get(..;); setPackages(resp1); })(), } }; []);

2. 使用useCallback鈎子來記憶getPackages function 以便它可以安全地添加到useEffect鈎子的依賴數組中。

    useEffect(() => { if(;packages){ getPackages(), } }; [getPackages]). const getPackages = useCallback(async () => { const resp1 = await instance.get(..;); setPackages(resp1), }; []);

此外，您不需要在useEffect掛鈎內進行以下檢查：

if(!packages) {
   ...
}

這個檢查不僅沒有必要而且會導致問題：

1. 在useEffect中使用packages將導致警告有關useEffect鈎子缺少依賴項。 這可以通過在useEffect鈎子的依賴數組中添加packages來解決

2. 如果你在useEffect鈎子的依賴數組中添加packages ，它可能會導致你原來的問題，即無限執行useEffect鈎子。

   useEffect掛鈎不應更新在其依賴項數組中指定的 state。

3. 由於packages的初始值是一個數組，因此if (!packages)條件永遠不會為真，因為數組是一個真值並且反轉它總是會評估為假。

   您可能打算寫if (.packages.length)但如前所述，此檢查是不必要的。

以下是我將如何重寫您的組件：

function Packages() {

    const [packages, setPackages] = useState([]);

    useEffect(() => {
       instance
          .get('https://jsonplaceholder.typicode.com/todos/1')
          .then((data) => setPackages(data))
          .catch(error => { /* handle error */ };
    }, []);
}

有關useEffect掛鈎的進一步閱讀，請閱讀：使用效果掛鈎

Answer 2

您應該為useEffect傳遞第二個參數。 在此處查看文檔。

例如：

useEffect(() => {
    if(!packages){
        // ... function here
    }
}, [packages]);

Answer 3

添加依賴數組

像這樣：

     useEffect(() => {
            if(!packages){
                getPackages();
            }
        },[packages]);