Reactjs InfiniteScroll持续获取数据，直到超过最大更新深度

在我的React项目中，当用户滚动到页面底部时，我使用react-infinite-scroll从API获取数据.当页面加载时，第一个获取调用按预期工作，但只要我向下滚动，就会进行50多个API调用，并得到Maximum update depth exceeded错误.你知道我可能做错了什么吗？

当页面=2时，response.data.next就是null，但从我的Angular 来看，hasMore总是true.

{"count":6,"next":null,...}

try 对hasMore使用useRef而不是useState，但结果相同.

我正在遵循一个基本示例，看起来像这样:

import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroller';
import Box from '@mui/material/Box';
import axiosInstance from '../axios';

const Test = () => {
  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);

  const fetchData = async (pageNumber) => {
    try {
      const response = await axiosInstance.get("/search/?page=" + (page))
      const newData = response.data.results;
      setData(prevData => [...prevData, ...newData]);
      setHasMore(response.data.next !== null);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  useEffect(() => {
    fetchData(page);
  }, [page]);

  const loadMore = () => {
    setPage(prevPage => prevPage + 1);
  };

  return (
    <>
    <Box sx={{height: '800px'}}>

    </Box>
    <InfiniteScroll
      pageStart={0}
      loadMore={loadMore}
      hasMore={hasMore}
      loader={<div key={0}>Loading...</div>}
    >
      {data.map(item => (
        <div key={item.id}>
          {/* Render your data here */}
        </div>
      ))}
    </InfiniteScroll>
    </>
  );
};

export default Test;