如何使用useState向对象追加无限滚动分页？

import React, { useState } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  // 其他代码...
}

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    // 获取初始数据并存储在data状态变量中
    const initialData = fetchData(page);
    setData(initialData);
  }, []);

  // 其他代码...
}

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);

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

  const handleScroll = () => {
    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
    if (scrollTop + clientHeight >= scrollHeight) {
      // 滚动到页面底部，加载更多数据
      const nextPage = page + 1;
      const newData = fetchData(nextPage);
      setData(prevData => [...prevData, ...newData]);
      setPage(nextPage);
    }
  };

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

  // 其他代码...
}

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);

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

  const handleScroll = () => {
    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
    if (scrollTop + clientHeight >= scrollHeight) {
      const nextPage = page + 1;
      const newData = fetchData(nextPage);
      setData(prevData => [...prevData, ...newData]);
      setPage(nextPage);
    }
  };

  const fetchData = (pageNumber) => {
    // 根据页码获取数据的逻辑，可以是网络请求或其他方式
    // 返回新的数据数组
    return [];
  };

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

  // 其他代码...
}