反應 useEffect() 無限循環

Question

我試圖復制一個個人項目以在加載數據時設置 Spinner 加載器，但我之前遇到了另一個錯誤。

我正在閱讀類似這樣的其他問題，為了避免useEffect()無限循環，我必須在最后添加一個空數組，但它仍然不起作用。

這是我的代碼，盡管添加了空數組，但它只是無限地重新渲染。

src/components/Users.js

import React, { useState, useEffect, useContext } from "react";
import GlobalContext from "../context/Global/context";

export default () => {
  const context = useContext(GlobalContext);
  const [users, setUsers] = useState([]);

  async function getUsers() {
    context.setLoading(true);
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    if (response.ok) {
        context.setLoading(false);
        const data = await response.json();
        setUsers(data);
    } else {
        console.error('Fetch error');
    }
  }

  useEffect(() => {
    getUsers();
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

這是非工作沙箱，我不確定為什么會發生這種情況，任何意見表示贊賞。

Answer 1

問題是您繼續安裝然后卸載用戶組件。 <App>呈現，並且加載為假，因此它呈現<Users> 。 由於用戶渲染它的效果得到運行，它立即將加載設置為 true。

由於加載現在為真， <App>渲染，並且不再具有<Users>組件。 您的效果中沒有拆卸邏輯，因此提取繼續進行，完成后，它將加載設置為 false 並將用戶設置為它獲得的數據。 嘗試設置用戶實際上會在控制台中導致此錯誤，它指出用戶已卸載：

proxyConsole.js:64 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in _default (at App.js:25)

現在加載已設置為 false，重復該過程。

對此的解決方案是讓數據加載在保持掛載的組件中。 要么將 App 更改為不卸載用戶，要么將提取移動到 App 並將數據作為道具傳遞。

Answer 2

我認為這個問題是因為

context.setLoading(false);

只需從getUsers函數中刪除這一行並添加一個單獨的useEffect鈎子。

useEffect(() => {
   context.setLoading(false);
}, [users]) //Run's only when users get changed