React链式调用中如何在slice时为count状态赋值？

你的核心需求是禁止跳转到超出内容总数的页面，不需要在slice链式调用里赋值状态，正确的做法是先获取过滤后的完整数据集长度，用它来控制分页边界。以下是修正方案：

关键问题分析 #

1. 原代码中count初始值是原始rows的长度，但你用了filter(item => item.id > 3)，过滤后实际数据量是9条，count没有同步更新，导致分页判断逻辑错误。
2. 分页的page从0开始，但你的handleLeft判断page > 1，逻辑不符合索引规则；handleRight的判断也因为count错误导致边界计算错误。

修正后的代码 #

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const rows = [
    { id: 1, name: "a" },
    { id: 2, name: "b" },
    { id: 3, name: "c" },
    { id: 4, name: "d" },
    { id: 5, name: "e" },
    { id: 6, name: "f" },
    { id: 7, name: "g" },
    { id: 8, name: "h" },
    { id: 9, name: "i" },
    { id: 10, name: "j" },
    { id: 11, name: "k" },
    { id: 12, name: "l" }
  ];

  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(3);

  // 先计算过滤后的完整数据集
  const filteredRows = rows.filter((item) => item.id > 3);
  // 计算最大页码（索引从0开始）
  const maxPage = Math.ceil(filteredRows.length / rowsPerPage) - 1;

  const handleLeft = () => {
    if (page > 0) {
      setPage(page - 1);
    }
  };

  const handleRight = () => {
    if (page < maxPage) {
      setPage(page + 1);
    }
  };

  // 计算当前分页的数据
  const currentPageRows = filteredRows.slice(
    page * rowsPerPage,
    page * rowsPerPage + rowsPerPage
  );

  return (
    <>
      <h3>
        总数据量: {filteredRows.length}, 当前页码: {page + 1}, 每页条数: {rowsPerPage}
      </h3>
      <button onClick={handleLeft}>上一页</button>
      <button onClick={handleRight}>下一页</button>
      {currentPageRows.map((item) => (
        <div key={item.id}>{item.id}</div>
      ))}
    </>
  );
}

核心修改点 #

• 提前计算filteredRows，直接用它的长度作为总数据量，不需要额外的count状态（如果一定要保留count，可以用useState(filteredRows.length)，并在依赖变化时更新）。
• 计算maxPage作为分页的上边界，确保handleRight不会让页码超出范围。
• 把分页数据的计算从JSX中抽离出来，代码更清晰，也避免重复计算。
• 修正页码判断逻辑，符合从0开始的索引规则（显示时可以+1让用户看到从1开始的页码）。

如果你坚持要在链式调用中获取slice后的长度（虽然这对分页边界控制没用，slice是当前页的数据长度），可以用一个中间变量：

const currentPageRows = rows
  .filter(item => item.id > 3)
  .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
// 此时currentPageRows.length就是当前页的条数，但控制分页边界需要的是过滤后的总条数

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