React函数组件中如何将for循环当前i值添加至空数组状态？

为什么你的代码会导致无限循环崩溃？ #

你这段代码如果直接写在组件的渲染逻辑里（比如组件函数的顶层），每次调用setBtn都会触发组件重新渲染，而重新渲染时又会再次执行整个循环、调用setBtn，形成无限渲染循环，最终导致React应用崩溃。

另外，React的状态更新是异步的，循环里的btn变量始终捕获的是当前渲染周期的初始值（空数组），所以你每次setBtn([...btn,...newArray])其实都是把空数组和不断累加的newArray合并——哪怕最后一次循环能把btn设为[1,2,...,10]，也会因为无限渲染根本走不到这一步。

正确的实现方式 #

方式1：直接初始化状态（推荐）

如果只是想让btn初始化为1到10的数组，直接在useState里完成初始化，不需要额外循环和状态更新：

// 函数式初始化，仅在组件首次渲染时执行一次
const [btn, setBtn] = useState(() => {
  return Array.from({ length: 10 }, (_, index) => index + 1);
});

方式2：在事件触发时更新状态

如果需要在交互（比如按钮点击）后生成数组，把逻辑放在事件处理函数里，避免在渲染阶段触发状态更新：

const [btn, setBtn] = useState([]);

const generateBtnArray = () => {
  const newArray = Array.from({ length: 10 }, (_, index) => index + 1);
  setBtn(newArray);
};

// 组件渲染内容示例
return (
  <div>
    <button onClick={generateBtnArray}>生成数组</button>
    {/* 遍历btn状态数组 */}
    {btn.map(num => (
      <span key={num}>{num} </span>
    ))}
  </div>
);

遍历状态数组 #

当btn正确设置为1-10的数组后，直接用map遍历即可，注意给每个子元素添加唯一的key（示例中已包含）。

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