Question

我有一个获取和显示数据的函数。我需要调用此函数两次，一次是在页面加载时，一次是在 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。

Answer 1

您的效果将更改为：

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

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

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

Answer 2

试着像这样改变你的 useEffect

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

useEffect 无限调用函数

2 个答案: