React中如何正确创建数字升序排列的数组状态

你当前的代码存在4个核心问题，无法得到预期结果：

• 渲染主流程中直接循环调用setState会触发无限重渲染：组件每次执行setInputs都会触发重新渲染，重渲染后会再次进入循环执行setInputs，直接造成死循环。
• 闭包陷阱：同一次渲染周期内，多次调用setInputs时拿到的inputs值始终是当前渲染闭包里的初始值（空数组），不会同步前一次set的结果，最终只会得到最后一次循环的i值，无法拼接出完整序列。
• 变量名拼写错误：代码中展开的是首字母大写的Inputs，和你定义的state变量inputs命名不一致，会直接抛出引用错误。
• 循环范围不匹配：i从0开始、终止条件为i<6，生成的序列是0-5，和你预期的1-5范围不符。

注意：不要尝试用函数式更新setInputs(prev => [...prev, i])修复问题，这种写法依然会在渲染阶段触发多次重渲染，存在死循环风险，性能极差，完全没有必要。

核心原则是不要循环多次调用setState，一次性生成完整数组后只做一次赋值，根据使用场景选对应写法即可。

场景1：组件初始化时就需要生成固定数组 #

直接在useState初始化阶段生成数组，不需要后续调用set，性能最优：

const [inputs, setInputs] = useState(() => {
  // 生成1-5的升序数组，用Array.from写法更简洁
  return Array.from({ length: 5 }, (_, index) => index + 1);
});

如果你习惯用for循环，也可以把生成逻辑写在初始化函数里：

const [inputs, setInputs] = useState(() => {
  const arr = [];
  for (let i = 1; i <= 5; i++) {
    arr.push(i);
  }
  return arr;
});

以上两种写法初始化后inputs的值就是你要的[1,2,3,4,5]。

场景2：需要在交互/异步逻辑触发时生成数组 #

先在事件回调、副作用里一次性生成完整数组，再单次调用setState赋值即可，比如点击按钮生成的场景：

const handleClick = () => {
  const targetArr = [];
  for (let i = 1; i <= 5; i++) {
    targetArr.push(i);
  }
  // 仅调用一次setState
  setInputs(targetArr);
};

如果是组件挂载后触发，放在useEffect里执行即可，不要直接写在组件函数的顶层作用域：

useEffect(() => {
  const targetArr = Array.from({length:5}, (_,i) => i+1);
  setInputs(targetArr);
}, []);

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