useEffect在更新状态和包含依赖数组时无限循环

Question

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

看这个例子。我使用的是swr和useSWRInfinite-请参阅此处的示例和此处的文档。

我的代码检查一个元素是inView，如果是，它获取下一页的数据。

一切正常

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

但是如果我将size添加到依赖数组中，当我在useEffect

中更新size时，会发生无限循环

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

谁能告诉我处理这个问题的正确方法?在阅读了许多SO的答案和博客文章之后，没有什么更清楚了。

Answer 1

您已经在依赖数组中添加了size。因此，只要size发生变化，useEffect就会运行。现在，在useEffect中，您正在使用setSizesetter对size进行递增。这将再次导致size更改并再次运行useEffect。

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

setSize((previousSize) => previousSize + 1)

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

Answer 2

你不应该在setSize中使用size状态。你可以把它改成setSize(size => size + 1)然后从依赖项数组中删除大小。可以在这里阅读更多:在这里输入链接描述