我总是觉得React有点奇怪,因为它被认为是一个反模式,不向useEffect
钩子添加所有依赖项,并且在控制台中显示警告。
以这个例子为例,我使用的是swr
和useSWRInfinite
--请看这里的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的答案和博客文章后,没有什么是更清楚的。
2条答案
按热度按时间olhwl3o21#
您已经在dependency数组中添加了
size
。因此,useEffect
将在size
更改时运行。现在,在useEffect
中,您正在使用setSize
setter递增size
。这将再次导致size
更改并再次运行useEffect
。如果要引用以前的
size
,可以使用setSize
的回调版本。这样,你的短绒就不会抱怨了。
vqlkdk9b2#
你不应该在setSize中使用size状态。你可以把它改为
setSize(size => size + 1)
,然后从依赖项数组中删除size。在此输入链接说明