reactjs 在更新状态并包含依赖关系数组时,useEffect无限循环

bweufnob  于 2023-01-02  发布在  React
关注(0)|答案(2)|浏览(207)

我总是觉得React有点奇怪,因为它被认为是一个反模式,不向useEffect钩子添加所有依赖项,并且在控制台中显示警告。
以这个例子为例,我使用的是swruseSWRInfinite--请看这里的example和这里的文档。
我的代码会检查元素是否为inView,如果是,则获取下一页数据。
这一切工作正常

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

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

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

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

olhwl3o2

olhwl3o21#

您已经在dependency数组中添加了size。因此,useEffect将在size更改时运行。现在,在useEffect中,您正在使用setSize setter递增size。这将再次导致size更改并再次运行useEffect
如果要引用以前的size,可以使用setSize的回调版本。

setSize((previousSize) => previousSize + 1)

这样,你的短绒就不会抱怨了。

vqlkdk9b

vqlkdk9b2#

你不应该在setSize中使用size状态。你可以把它改为setSize(size => size + 1),然后从依赖项数组中删除size。在此输入链接说明

相关问题