如何在react本机反转平面列表中使用无限滚动

const [data, setData] = useState([]);

useEffect(() => {
  const handleScroll = () => {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    const documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

    if (scrollTop + windowHeight >= documentHeight) {
      // 用户滚动到了列表底部，可以加载更多数据
      // 调用加载数据的函数
      loadMoreData();
    }
  };

  window.addEventListener('scroll', handleScroll);

  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []);

const loadMoreData = () => {
  // 发送请求获取新的数据
  // 可以使用fetch或axios等库发送异步请求

  // 假设请求返回的数据为response
  const newData = response.data;

  // 将新数据添加到原有的数据数组中
  setData(prevData => [...prevData, ...newData]);
};

return (
  <div>
    {data.map(item => (
      <div key={item.id}>{item.name}</div>
    ))}
  </div>
);