React JS分页功能报错，数据调用逻辑问题求助

问题说明 #

分页功能失效，因为初始加载数据时getComments正确取了data.list赋值给items，但分页切换的handlePageClick中直接把API返回的完整data对象传给了setItems，导致后续items.map报错（items变成包含count和list的对象，而非数组）。

API返回结构 #

{
  "count": 1134,
  "list": [
    {
      "brand": "28147",
      "category": "Bakery, Bagels, Buns & Rolls",
      "code": "20641213_EA",
      "description": "In Store Baked White Submarine Rolls Pkg. of 4",
      "id": "630b710efe3e956401de6c09",
      "image": "https://assets.shop.loblaws.ca/products/20641213/b1/en/front/20641213_front_a01_@2.png",
      "inStock": "OK",
      "measurement": "130 g",
      "name": "Submarine Buns 4 Pack",
      "price": 3.99,
      "price_type": "SOLD_BY_EACH",
      "store": "realcanadiansuperstore"
    }
  ]
}

核心修复点 #

在handlePageClick中，将setItems(commentsFormServer)改为setItems(commentsFormServer.list)，确保传入的是数组类型的列表数据：

const handlePageClick = async (data) => {
  const currentPage = data.selected + 1;
  const commentsFormServer = await fetchComments(currentPage);
  setItems(commentsFormServer.list); // 修复：提取list数组赋值给items
};

修复后完整代码 #

function CategoryPage() {
  const { onAdd } = useStateContext();
  const [items, setItems] = useState([]);
  const [pageCount, setpageCount] = useState(0);
  const limit = 40; // 改用const，避免不必要的变量重新赋值
  const { category, store } = useParams();

  useEffect(() => {
    const getComments = async () => {
      const res = await fetch(
        `https://api/find?store=${store}&category=${category}&pages=0&items=${limit}`
      );
      const data = await res.json();
      const total = data.count;
      setpageCount(Math.ceil(total / limit));
      setItems(data.list);
    };
    getComments();
  }, [limit, category, store]); // 补充依赖项，参数变化时自动重新加载数据

  const fetchComments = async (currentPage) => {
    const res = await fetch(
      `https://api/find?store=${store}&category=${category}&pages=${currentPage}&items=${limit}`
    );
    const data = await res.json();
    return data;
  };

  const handlePageClick = async (data) => {
    const currentPage = data.selected + 1;
    const commentsFormServer = await fetchComments(currentPage);
    setItems(commentsFormServer.list);
  };

  return (
    <>
      {/* 数据渲染区域 */}
      {items.map((product, index) => (
        <div key={product.id}>{/* 你的产品渲染逻辑 */}</div>
      ))}
      {/* 分页组件 */}
      <ReactPaginate
        previousLabel={"previous"}
        nextLabel={"next"}
        breakLabel={"..."}
        pageCount={pageCount}
        marginPagesDisplayed={2}
        pageRangeDisplayed={3}
        onPageChange={handlePageClick}
        containerClassName={"pagination justify-content-center"}
        pageClassName={"page-item"}
        pageLinkClassName={"page-link"}
        previousClassName={"page-item"}
        previousLinkClassName={"page-link"}
        nextClassName={"page-item"}
        nextLinkClassName={"page-link"}
        breakClassName={"page-item"}
        breakLinkClassName={"page-link"}
        activeClassName={"active"}
      />
    </>
  );
}

额外优化建议 #

1. 把let limit = 40改为const limit = 40，固定每页条数避免潜在问题。
2. 给useEffect补充category和store依赖，路由参数变化时自动重新加载对应数据。
3. items.map使用产品id作为key，避免React渲染警告。

内容的提问来源于stack exchange，提问作者Ons Jannet