React中如何避免计数器prevState出现重复行为？

你的代码出现异常的核心原因是在setCounter的状态更新回调中嵌套调用了setButtons，这种写法会导致状态更新的依赖关系混乱，加上循环里多次触发状态更新，最终让按钮的生成逻辑出现异常。

React的状态更新是异步且批量处理的，当你在setCounter的回调里修改buttons状态时，虽然用了函数式更新(prevButtons => ...)，但由于每次循环都同时触发两个状态更新，会导致buttons的更新无法和counter的更新完全同步，最终生成的按钮编号可能重复或者不符合预期。

修复方案 #

我们可以把循环内的状态更新逻辑改成批量处理，先计算出所有要添加的按钮和最终的计数器值，再一次性更新两个状态，这样既符合React的状态更新规范，也能避免异常：

import React, { useState } from 'react';

function App() {
  const [counter, setCounter] = useState(1);
  const [buttons, setButtons] = useState([]);

  const addButton = () => {
    // 计算本次要添加的5个按钮
    const newButtons = [];
    let currentCounter = counter;
    for (let i = 0; i < 5; i++) {
      newButtons.push({
        id: `button${currentCounter}`,
        label: `Button ${currentCounter}`
      });
      currentCounter++;
    }
    // 一次性更新按钮列表和计数器
    setButtons(prev => [...prev, ...newButtons]);
    setCounter(currentCounter);
  };

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">Dynamic Button Creator</h1>
      <button 
        onClick={addButton} 
        className="bg-blue-500 text-white px-4 py-2 rounded mb-4"
      >
        Add Button
      </button>
      <div>
        {buttons.map(button => (
          <button
            key={button.id}
            id={button.id}
            onClick={addButton} 
            className="bg-green-500 text-white px-4 py-2 rounded mb-2 mr-2"
          >
            {button.label}
          </button>
        ))}
      </div>
    </div>
  );
}

export default App;

关键改进点 #

1. 批量生成按钮：先在循环里计算好所有要添加的按钮数据，避免多次触发状态更新。
2. 分离状态更新：分别一次性更新buttons和counter，不再嵌套调用状态更新函数，确保状态更新的独立性和正确性。
3. 避免异步依赖：直接基于当前的counter值计算新按钮的编号，再更新到最终的currentCounter，不会出现异步状态更新导致的数值偏差。

如果你坚持要使用函数式更新的方式（比如担心counter的异步更新问题），也可以这样写：

const addButton = () => {
  setCounter(prevCounter => {
    const newButtons = [];
    let nextCounter = prevCounter;
    for (let i = 0; i < 5; i++) {
      newButtons.push({
        id: `button${nextCounter}`,
        label: `Button ${nextCounter}`
      });
      nextCounter++;
    }
    setButtons(prev => [...prev, ...newButtons]);
    return nextCounter;
  });
};

这种写法只触发一次setCounter，在它的回调里计算所有按钮并更新buttons，同样能避免之前的异常问题，但批量更新的方式更清晰直观。

内容的提问来源于stack exchange，提问作者Mehmet Emre Sever