React分页组件点击两次才加载后端数据问题咨询

嘿，刚接触React就动手写分页组件，已经很棒啦！你遇到的这个“点击分页按钮要两次才加载数据”的问题，其实是React setState 的异步特性在搞鬼～

问题原因 #

React的setState并不是同步更新状态的——当你在函数里先调用setState修改page，紧接着就去拿this.state.page请求数据时，此时state还没完成更新，你拿到的依然是旧的页码。所以第一次点击实际上用的还是之前的页码请求（看起来没变化），第二次点击时才用上一次更新后的页码，就造成了“要两次才生效”的错觉。

解决方案 #

根据你的代码场景，有两种简单有效的解决方式：

方式1：利用setState的回调函数

setState的第二个参数是状态更新完成后的回调函数，在这个回调里调用数据获取方法，就能确保拿到的是最新的state：

// 假设你的分页点击处理函数是这样的
handlePageClick = (targetPage) => {
  // 先更新page状态，在回调里执行数据请求
  this.setState({ page: targetPage }, () => {
    // 这里的this.state.page已经是更新后的新页码了
    this.fetchData();
  });
}

// 你的数据获取函数
fetchData = () => {
  const { page, limit } = this.state;
  // 用最新的page和limit请求后端数据
  // 比如axios.get(`/api/list?page=${page}&limit=${limit}`)
  // ...后续处理逻辑
}

方式2：直接传递新页码给请求函数

不依赖state，直接把点击的新页码作为参数传给数据获取函数，彻底避开异步更新的问题：

handlePageClick = (targetPage) => {
  this.setState({ page: targetPage });
  // 直接把新页码传给fetchData
  this.fetchData(targetPage);
}

// 修改fetchData函数，支持接收page参数
fetchData = (page = this.state.page) => {
  const { limit } = this.state;
  // 使用传入的page参数请求数据
  // axios.get(`/api/list?page=${page}&limit=${limit}`)
  // ...后续处理逻辑
}

额外小提示 #

1. 初始化页面时，记得在componentDidMount里调用一次fetchData，确保首次加载就能拿到数据：

componentDidMount() {
  this.fetchData();
}

2. 计算分页数量时，最好处理一下dataLength的类型和取整问题，避免出现非整数的分页数量：

// 把dataLength转成数字，再用Math.ceil向上取整
const totalPages = Math.ceil(Number(this.state.dataLength) / this.state.limit);
let links = [];
for (let i = 1; i <= totalPages; i++) {
  links.push(i);
}

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