点击「显示更多」按钮时如何正确更新计数器状态？API请求参数异常问题

这个问题是React异步状态更新特性导致的典型场景，我来帮你拆解并给出修复方案：

问题原因 #

你当前的代码中，每次点击按钮时，请求URL里的this.state.counter + 25和setState里的this.state.counter + 25，都是基于函数执行瞬间的旧state值。而React的setState是异步批量更新的，当状态还没完成更新时，this.state.counter会保持旧值（比如第一次点击后state还没更新到25，第二次点击时this.state.counter依然是0），所以每次计算出来的都是0 + 25 = 25，导致请求地址重复。

修复方案 #

方案一：预先计算新状态值（最直接） #

先算出要用到的新counter值，确保请求URL和状态更新复用同一个值，彻底避免异步状态的影响：

showMore = () => {
  // 提前计算好新的counter值
  const newCounter = this.state.counter + 25;
  axios.get(`some_random_link/append/${newCounter}/0`).then(res => {
    this.setState({ counter: newCounter });
    // 这里可以处理接口返回的数据，比如追加到展示列表中
  });
};

方案二：使用函数式setState（适合依赖前序状态的场景） #

如果你的业务逻辑需要严格基于最新的前一次状态更新，可以用setState的函数形式，它会自动传入上一次的状态作为参数，保证状态更新的准确性：

showMore = () => {
  const nextCounter = this.state.counter + 25;
  axios.get(`some_random_link/append/${nextCounter}/0`).then(res => {
    this.setState(prevState => ({
      counter: prevState.counter + 25
    }));
    // 处理返回内容
  });
};

额外优化：防止重复请求 #

建议添加加载状态，避免用户快速点击按钮导致多次重复请求：

constructor(props){ 
  this.state = { 
    counter: 0,
    isLoading: false // 新增加载状态
  }
}

showMore = () => {
  // 如果正在加载，直接终止函数
  if (this.state.isLoading) return;
  
  const newCounter = this.state.counter + 25;
  this.setState({ isLoading: true });
  
  axios.get(`some_random_link/append/${newCounter}/0`)
    .then(res => {
      this.setState({ 
        counter: newCounter,
        // 示例：假设你有列表数据需要更新
        // list: [...this.state.list, ...res.data]
      });
    })
    .catch(err => {
      console.error('加载内容失败:', err);
    })
    .finally(() => {
      // 无论请求成功或失败，都恢复加载状态
      this.setState({ isLoading: false });
    });
};

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