如何在循环的switch语句中正确更新React State？

问题根源 #

1. State更新的异步性与闭包陷阱：React的setValue是异步批量执行的，循环中每次调用setValue时，闭包捕获的value都是组件初始渲染时的空数组。因此三次setValue([...value, copy])实际上都是基于空数组添加元素，最终只会保留最后一次更新的结果[3]。
2. 冗余循环逻辑：循环遍历0到9，仅处理1、2、3三个值，属于不必要的性能浪费。

修复方案 #

方案一：使用函数式更新（适合逐步修改State的场景） #

通过函数式更新获取最新的State，确保每次更新都基于当前最新值：

import "./styles.css";
import { useEffect, useState } from "react";

export default function App() {
  const [value, setValue] = useState([]);

  useEffect(() => {
    run();
  }, []);

  const run = () => {
    // 直接遍历目标值，避免冗余循环
    [1, 2, 3].forEach(num => {
      // 函数式更新，prev为当前最新的state
      setValue(prev => [...prev, num]);
    });
  };

  return (
    <div className="App">
      {value.map((item) => (
        <h2 key={item}>{item}</h2>
      ))}
    </div>
  );
}

注：给map的元素添加了key属性，符合React列表渲染规范。

方案二：一次性更新State（高效简洁，适合明确最终State的场景） #

直接构建好目标数组，一次性调用setValue完成更新，减少State更新次数：

import "./styles.css";
import { useEffect, useState } from "react";

export default function App() {
  const [value, setValue] = useState([]);

  useEffect(() => {
    run();
  }, []);

  const run = () => {
    // 直接构建目标数组，一次完成State更新
    setValue([1, 2, 3]);
  };

  return (
    <div className="App">
      {value.map((item) => (
        <h2 key={item}>{item}</h2>
      ))}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Nghĩa Phạm