在useEffect中使用setState時如何防止我的React代碼中的無限循環

Question

請檢查代碼框： https://codesandbox.io/s/bold-hamilton-k1nzs

在我運行代碼的那一刻，我得到一個無限循環，您可以檢查控制台以查看條目如何呈指數增長。 最終網站崩潰。

我有一個像這樣的 state 變量：

const [checkbox, setCheckBox] = useState({});

然后我在useEffect里面調用一個function：

useEffect(() => {
    createCheckbox();
  });

這是 createCheckbox function：

const createCheckbox = () => {
    let checkboxObj = {};
    rows.forEach((e) => {
      checkboxObj[e.id] = false;
    });
    setCheckBox(checkboxObj);
  };

我在第 76 行有一個 console.log 來展示這個問題。 它是 console.log(checkbox)

知道發生了什么嗎？

Answer 1

為useEffect使用依賴數組。 所以這：

  useEffect(() => {
    createCheckbox();
  });

應該：

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

如您所知， useEffect()接受一個依賴數組作為第二個參數。 它只會在數組中的任何變量發生變化時運行。 當您在沒有第二個參數的情況下運行useEffect時，它充當 componentDidMount 和 componentDidUpdate。 因此，由於您在無依賴的 useEffect 中設置了 state，因此 state 更改會一次又一次地觸發它，從而創建無限循環的渲染。

當使用空的依賴數組調用useEffect時，它只會在第一次渲染時運行一次。 這就是你所需要的。

Answer 2

問題

useEffect(() => {
  createCheckbox();
});

useEffect hook 沒有依賴關系，因此每次組件渲染時都會運行，並且由於 hook 回調最終會更新 state，它會觸發另一個渲染周期。 沖洗並重復，令人作嘔（即渲染循環）。

解決方案

基本上我想在第一次加載時將復選框初始化為空/假。

您可以使用帶有空依賴數組的useEffect在組件掛載時運行一次效果。

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

或者使用懶惰的 state 初始化 function 和useState鈎子。

const [checkbox, setCheckBox] = useState(() => {
  let checkboxObj = {};
  rows.forEach((e) => {
    checkboxObj[e.id] = false;
  });
  return checkboxObj;
});

演示