React中布尔值与数值状态更新异常，是否需要使用prev value？

为什么控制台会显示旧值？ #

React的useState更新函数（比如setValue、setBoolean）是异步批量更新的，调用后并不会立刻修改当前组件闭包里的状态变量。你在调用更新函数后立刻console.log，拿到的还是当前渲染周期里的旧状态值——这和你用不用函数式更新（prev value）无关，是React状态更新的异步特性导致的。

要不要用prev value？ #

如果新状态完全不依赖旧状态（比如你直接设置固定值1、true），完全没必要用函数式更新（setValue(() => 1)这种写法），直接传固定值就行：setValue(1)、setBoolean(true)。

函数式更新（也就是用prev value的场景），是当新状态需要基于旧状态计算时才用——比如计数setValue(prev => prev + 1)，这时候用函数式更新能确保拿到最新的旧状态，避免因为异步批量更新导致的 stale 值问题。

怎么正确查看更新后的状态？ #

要看到更新后的状态，有两种常用方式：

• 用useEffect监听状态变化，状态更新完成后会触发effect回调
• 在组件的渲染逻辑中打印（仅调试用）

修正后的示例代码 #

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

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

  // 监听value变化，打印新值
  useEffect(() => {
    console.log("更新后的value:", value);
  }, [value]);

  // 监听boolean变化，打印新值
  useEffect(() => {
    console.log("更新后的boolean:", boolean);
  }, [boolean]);

  return (
    <div>
      <button onClick={() => setValue(1)}>Value 1</button>
      <button onClick={() => setValue(2)}>Value 2</button>
      <p>Booleans</p>
      <button onClick={() => setBoolean(true)}>True</button>
      <button onClick={() => setBoolean(false)}>False</button>
    </div>
  );
}

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