React UseEffect 渲染無限循環

Question

我的代碼中似乎有一個無限循環，但我似乎看不到在哪里，如果我設置 state 的東西是 useEffect 的依賴項但這里兩個變量（值/項）完全是分開。

應用程序.js

import React from 'react';
import './style.css';
import MyComponent from './MyComponent.js';

export default function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

我的組件.js

import React, { useEffect, useState } from 'react';

const MyComponent = ({ values = [] }) => {

  console.log('MyComponent Reloaded');
  const [items, setItems] = useState();

  useEffect(() => {
    const loadItems = () => {
      //setItems([]);   //why does this cause infinite render loop?
    };

    loadItems();
  }, [values]);

  return <></>;
};

export default MyComponent;

為什么這會導致渲染循環？

我在這里有一個示例構建（取消注釋注釋行以開始渲染循環）

Answer 1

您需要以正確的方式引入道具的默認值：

import React, { useEffect, useState } from 'react';

const MyComponent = ({ values }) => {
  console.log('MyComponent Reloaded');
  const [items, setItems] = useState();

  useEffect(() => {
    console.log(values)
    const loadItems = () => {
      setItems([]);
    };

    loadItems();
  }, [values]);

  return <></>;
};

MyComponent.defaultProps = {
  values: []
}

export default MyComponent;

Answer 2

代碼中有兩個可能的錯誤：

• 根據您的代碼，每次都會創建values變量，當與以前的values變量檢查時，它是不一樣的。 所以它會導致無限循環。

  • 要解決此問題，請使用默認道具。

     const MyComponent = ({ values }) => {... MyComponent.defaultProps = { values: [] }

• 正如你的問題，這條線會導致你無限循環

   //setItems([]);

  • 為了克服這個

    添加items依賴項以及values ，以便在重新渲染之前監視兩個值。

     useEffect(() => { console.log(values) const loadItems = () => { setItems([]); }; loadItems(); }, [values,items]);