React未直接修改状态却无法获取旧值？函数式更新解惑

原代码的问题根源 #

你原代码的核心问题是闭包捕获的状态值过时：
因为你的useEffect依赖数组是空的[]，这意味着effect里的回调只会在组件首次渲染时执行一次，此时定时器回调里捕获的liveChats是组件初始化时的空数组。之后每2秒触发定时器时，都会基于这个初始空数组去复制、添加新对象，然后调用setLiveChats。所以每次更新后，状态里永远只有刚添加的那一个对象，之前的内容被覆盖了，看起来像是“拿不到更新后的状态”。

你虽然遵循了“不直接修改状态”的规则，但因为闭包的特性，始终拿不到状态的最新值，自然无法累积更新。

为什么函数式更新能解决问题 #

React的状态更新器支持传入一个函数（也就是你用的(prevState) => ...形式），这种方式下：

• React会自动把当前最新的状态值作为参数传给这个函数，不管闭包里捕获的旧值是什么，都能基于最新状态做更新。
• 这样即使effect的依赖是空数组，也能保证每次更新都是基于上一次的最新状态，实现正确的累积效果。

相关经验法则 #

• 当状态更新依赖当前状态的最新值，且更新逻辑在定时器、事件监听、Promise回调这类会形成闭包的场景中时，必须使用函数式状态更新。
• useEffect的依赖数组要精准：如果effect里用到了状态/prop，原则上要加到依赖数组里，但像定时器这种场景，加了依赖会导致每次状态更新都重新创建定时器（引发多个定时器同时运行的问题），所以用函数式更新是最优方案，既不用加依赖，又能拿到最新状态。
• 始终坚持“不直接修改状态变量”，必须基于旧状态创建新的状态副本（你这点做的是对的，只是没解决闭包的问题）。

原问题代码 #

const [liveChats, setLiveChats] = useState([]);

useEffect(() => {
  const interval = setInterval(() => {
    const newLiveChats = [...liveChats];
    newLiveChats.push({
      name: generateRandomName(),
      message: generateRandomMessage(20),
    });
    setLiveChats(newLiveChats);
  }, 2000);

  return () => clearInterval(interval);
}, []);

修正后的代码 #

const [liveChats, setLiveChats] = useState([]);

useEffect(() => {
  const interval = setInterval(() => {
    setLiveChats((prevState) => [
      {
        name: generateRandomName(),
        message: generateRandomMessage(20),
      },
      ...prevState,
    ]);
  }, 2000);

  return () => clearInterval(interval);
}, []);

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