react-table v6.9.2服务端分页失效：初始加载全量数据求助

我帮你梳理下当前代码里的核心问题，以及对应的修复方案：

问题根源拆解 #

1. API接口不支持分页参数：你用的jsonplaceholder posts接口本身不接受page/pageSize这类分页参数，所以无论你传什么，它都会返回全部100条数据，这是分页失效的核心原因（实际项目中需要替换为支持服务端分页的真实接口）。
2. 拼写错误：代码里filtered: state.filterd是笔误，应该是state.filtered，这个小错误会导致过滤参数无法正确传递。
3. 响应处理逻辑错误：你尝试读取res.data.pages，但这个字段在接口返回的纯数组里根本不存在，React Table需要知道总页数才能正确渲染分页器，必须手动计算总页数。
4. 状态赋值错误：你把接口返回的全量数据都赋值给了data，没有截取当前页的内容，导致React Table无法展示分页后的结果。

修复后的完整代码 #

下面是修正后的组件代码，我加入了模拟服务端分页的逻辑（实际项目中替换为你的真实API即可）：

import React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import axios from "axios";

class ServerSideTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      pages: null,
      loading: false
    };
  }

  render() {
    const columns = [
      { Header: "ID", accessor: "id" },
      { Header: "Title", accessor: "title" },
      { Header: "Body", accessor: "body" }
    ];

    return (
      <ReactTable
        onFetchData={(state, instance) => {
          this.setState({ loading: true });

          // 模拟服务端分页：先获取全量数据，再截取当前页（实际项目替换为带分页参数的API）
          axios.get("https://jsonplaceholder.typicode.com/posts")
            .then(res => {
              const totalItems = res.data.length;
              const { page, pageSize } = state;
              // 计算总页数
              const totalPages = Math.ceil(totalItems / pageSize);
              // 截取当前页的数据
              const startIndex = page * pageSize;
              const endIndex = startIndex + pageSize;
              const currentPageData = res.data.slice(startIndex, endIndex);

              this.setState({
                data: currentPageData,
                pages: totalPages,
                loading: false
              });
            })
            .catch(err => {
              console.error("数据请求失败:", err);
              this.setState({ loading: false });
            });
        }}
        columns={columns}
        data={this.state.data}
        pages={this.state.pages}
        loading={this.state.loading}
        filterable
        defaultPageSize={10}
        noDataText={"Loading..."}
        manual // 必须保留，告知React Table由我们手动处理分页/排序/过滤
      />
    );
  }
}

export default ServerSideTable;

关键修复点说明 #

1. 正确处理分页数据：通过slice方法从全量数据中截取当前页的内容，模拟服务端返回的分页结果。实际项目中，只需让后端接口接受page和pageSize参数，返回对应页的数据和总条目数即可。
2. 计算总页数：用Math.ceil(总条目数 / 每页条数)得到总页数，赋值给pages状态，React Table会根据这个值渲染正确的分页按钮。
3. 修正拼写错误：把state.filterd改成state.filtered，确保过滤参数能正确传递到API（如果你的接口支持过滤的话）。
4. 移除冗余状态：不需要手动在state中存储page，React Table会在onFetchData的state参数中自动传递当前页码，直接使用即可。

实际项目中的适配建议 #

如果你的后端接口支持服务端分页，只需把axios.get的请求改成：

axios.get("/your-api/posts", {
  params: {
    page: state.page,
    pageSize: state.pageSize,
    sorted: state.sorted,
    filtered: state.filtered // 注意拼写正确
  }
})

然后在响应处理中，用后端返回的当前页数据和总条目数计算总页数：

.then(res => {
  const { data, total } = res.data;
  const totalPages = Math.ceil(total / state.pageSize);
  this.setState({
    data: data,
    pages: totalPages,
    loading: false
  });
})

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