更新状态和包含依赖数组时使用Effect无限循环答案

【问题标题】：useEffect infinite loop when updating state and including dependency array更新状态和包含依赖数组时使用Effect无限循环
【发布时间】：2023-02-15 09:30:28
【问题描述】：

我总是觉得 React 有点奇怪，据说不将所有依赖项添加到 useEffect 挂钩是一种反模式，并且控制台中会显示警告。

举个例子。我正在使用 swr 和 useSWRInfinite - 请参阅此处的 example 和文档 here。

我的代码看起来检查元素是否为 inView，如果是，则获取下一页数据。

这一切都很好

useEffect(() => {
    if (inView) {
      setSize(size + 1)
    }
}, [inView, setSize])

但是，如果我将 size 添加到依赖项数组，则会在更新 useEffect 中的 size 时发生无限循环

useEffect(() => {
  if (inView) {
    setSize(size + 1)
  }
}, [inView, setSize, size]) <------ everything breaks

谁能建议正确的处理方法。在阅读了许多 SO 答案和博客文章之后，没有什么比这更清楚了。

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-hooks

【解决方案1】：

您已在依赖项数组中添加 size。因此，useEffect 将在size 更改时运行。现在，在您的useEffect 中，您正在使用setSize setter 递增size。这将再次导致size 更改并再次运行useEffect。

如果想引用之前的size，可以使用setSize的回调版本。

setSize((previousSize) => previousSize + 1)

这样，当您不在依赖项数组中添加 size 时，您的 linter 不会抱怨，因为现在您没有使用它。

【讨论】：

【解决方案2】：

您不应该在 setSize 中使用大小状态。你可以把它改成 setSize(size => size + 1) 然后从依赖数组中删除大小。可以在这里阅读更多：enter link description here

【讨论】：