React/TypeScript中useState钩子何时基于前序状态更新状态

其实判断标准很简单，核心看新状态是否依赖当前状态的值：

情况1：不需要依赖前序状态 → 直接更新就行 #

就像你给出的例子：

const exampleData = [ { text: 'Example name', value: 1 }, { text: 'Example name 2', value: 2 } ]
const [asset, setAsset] = useState(exampleData[0]);
const handleClick = (event) => { setAsset(event.target.value) }

这里你要设置的新asset值来自event.target.value，和当前的asset状态完全无关——不管之前的asset是什么，你都直接用事件触发的新值覆盖。这种场景下，直接调用setAsset赋值完全没问题，根本不需要用前序状态。

情况2：必须依赖前序状态 → 一定要用函数式更新 #

当你的新状态是基于当前状态计算/修改出来的，这时候就必须用函数式更新（也就是依赖前序状态）。因为React的状态更新是异步批量处理的，直接引用当前状态变量可能会拿到旧值，导致更新错误。

举个例子，如果你要修改当前asset对象的value属性（比如加1）：

// ❌ 不推荐：直接引用asset可能拿到旧值
const handleIncrement = () => {
  setAsset({ ...asset, value: asset.value + 1 });
}

// ✅ 正确：用函数式更新获取最新的前序状态
const handleIncrement = () => {
  setAsset(prevAsset => ({ ...prevAsset, value: prevAsset.value + 1 }));
}

这里prevAsset是React保证的最新状态值，能避免异步更新导致的旧值问题。

补充：和状态类型无关 #

不管你的状态是基本类型（数字、字符串）还是对象/数组，判断逻辑都是一样的：只要新状态依赖当前状态，就用函数式更新；反之则直接赋值即可。比如计数器案例里，count + 1依赖当前的count，所以要用setCount(prev => prev + 1)——本质和对象的场景是一样的。

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