useEffect 无限调用函数答案

【问题标题】：useEffect calling function infinitelyuseEffect 无限调用函数
【发布时间】：2021-04-03 17:58:46
【问题描述】：

我有一个获取和显示数据的函数。我需要调用此函数两次，一次是在页面加载时，一次是在 InfiniteScroll 调用它时。问题是当 getData 被 useEffect 调用时，它会永远持续下去。

代码：

const getData = async(page) => {
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    
    axios.get(`/api?page=${page}&limit=10`, { cancelToken: source.token })
    .then(res => {
        setProducts(prevProducts => {
            return [...new Set([...prevProducts, ...res.data])]
        })     
        setHasMore(res.data.length > 0)

        console.log(res.data)
    }).catch(e => {
        if (axios.isCancel(e)) return 
    })
}

useEffect(() => {
    getData()
}, [getData])

const handlePagination = () => {
    setPage(page + 1)
}

 ...

   <InfiniteScroll
      dataLength={products.length}
      next={handlePagination}
      hasMore={hasMore}
    >
     ... 
   </InfiniteScroll>

当 getData 被 useEffect 调用时，它会永远消失。请注意，我使用的是 react-infinite-scroll-component。

【问题讨论】：

标签： reactjs

【解决方案1】：

你的效果会变成：

useEffect(() => {
    getData()
}, [page])

这样，当页面发生变化时，我的意思是滚动结束，新数据将被获取。

您正面临无限循环，因为您在获取数据的过程中获取数据。听起来很奇怪，但它确实发生了。

【讨论】：

【解决方案2】：

尝试像这样改变你的 useEffect

useEffect(() => {
 getData(),
 return () => {}
}, [])

【讨论】：

这肯定会打破无限循环，但它不会达到无限滚动的目的。
将 [] 替换为 [页面]
对，这就是我的答案。
是的，你是对的。我认为是最好的解决方案