react 使用useEffect做分页取数据

使用useState存数据

使用useEffect监听页码page，页码改变重新获取数据

点击按钮加载更多使page+1

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

interface GoodsList {
  goods_id: string;
  name: string;
  cover_url: string;
}

// 分页取数据

function PageData() {
  const [list, setList] = useState<GoodsList[]>([]); //商品列表
  const [page, setPage] = useState(1); // 商品页

  useEffect(() => {
    // 在vite.config.ts 文件中使用proxy代理（解决跨域）
    fetch(
      `......................请求地址......................limit=10&page=${page}`
    )
      .then((res) => res.json())
      .then((res) => {
        setList([...list, ...res.data.list]); // 数组拼接
      });
  }, [page]); // 监听页码，页码改变重新获取数据
  return (
    <div>
      <ul>
        {list.map((item) => (
          <li key={item.goods_id}>
            <p>{item.name}</p>
            <img src={item.cover_url} alt="" style={{ width: "120px" }} />
          </li>
        ))}
        <button
          onClick={() => {
            setPage(page + 1);
          }}
        >
          加载更多
        </button>
      </ul>
    </div>
  );
}

export default PageData;