Question

我正在尝试在状态更改后重新渲染组件，这是我的做法：

const [items, setItems] = useState([]);

useEffect(() => {
    console.log("I am rerendering")
    const displayNotebook = async () => {
    const reponse = await axios({// URL etc...},
      });
      setItems(reponse.data); // add data to the list
    };

   displayNotebook()
  
  },[items]);

我在地图中这样传递日期

const workspaceCard = items.map((msg) => (
<WorkspaceContent
  message={msg.content}
/>));

问题是组件处于无限重新渲染中，我可以使用空数组但这不是我想要的，每次状态更新时我都尝试重新渲染组件。

我搜索并找到了这个答案 Infinite loop in useEffect 但对我没有帮助

Answer 1

正如 Gaëtan 已经指出的，你的逻辑有一个循环：在你的效果中你正在设置项目，但你也表明当项目改变时效果应该重新运行。因此循环。修复很简单，只需删除对 items 的依赖，如果您不需要/不想在效果发生变化时重新运行效果：

useEffect(() => {
    // ...
  },[]);  // items removed

使用 useEffect 无限重新渲染

1 个答案: