react fetch请求分页数据

React是一种流行的JavaScript库，用于构建用户界面。fetch()是它提供的一种用于发送网络请求的方法，常用于获取数据。

在React中使用fetch请求分页数据的步骤如下：

1. 需要使用一个状态变量来存储分页数据，例如：

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

2. 创建一个函数来发送fetch请求获取数据，例如：

const fetchData = async () => {
  try {
    const response = await fetch('http://api.example.com/data?page=1'); // 发送GET请求
    const json = await response.json();
    setData(json.data); // 将获取的数据存储到状态变量中
  } catch (error) {
    console.log(error);
  }
}

3. 在组件加载后调用fetchData函数来获取初始数据，可以使用useEffect钩子来实现：

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

4. 创建一个函数来处理分页操作，例如：

const handlePagination = async (page) => {
  try {
    const response = await fetch(`http://api.example.com/data?page=${page}`);
    const json = await response.json();
    setData(json.data); // 更新分页数据
  } catch (error) {
    console.log(error);
  }
}

5. 在组件中展示分页按钮，并调用handlePagination函数来处理分页操作，例如：

return (
  <div>
    {data.map(item => <div key={item.id}>{item.name}</div>)}
    <button onClick={() => handlePagination(2)}>下一页</button>
  </div>
);

通过以上步骤，我们可以使用React中的fetch方法来发送分页数据请求，并且在页面展示和处理分页操作。当点击下一页按钮时，会发送新的fetch请求来获取下一页的数据，并更新页面的展示。