React中基于前序状态调用setState时的TypeScript错误排查

问题根源 #

错误提示的核心是：TypeScript判定你的回调函数返回了(number | undefined)[]类型，但setPlayerCounts要求返回严格的number[]。问题出在你对prev的多余判断——React的setState回调参数prev永远是当前的合法状态值，也就是定义好的number[]（哪怕初始值是空数组），不会是undefined。你写的prev ? ... : ...分支让TypeScript误判存在返回不确定类型的可能。

修复代码 #

直接移除对prev的空值判断，因为它肯定是number[]类型，直接拼接即可：

if(setPlayerCounts && playerCount !== undefined)
  setPlayerCounts(prev => [...prev, playerCount]);

如果你的父组件状态确实存在初始为undefined的极端情况（不推荐，React状态建议设置明确初始值），可以给prev加默认兜底值：

if(setPlayerCounts && playerCount !== undefined)
  setPlayerCounts((prev = []) => [...prev, playerCount]);

额外提示 #

• 确保父组件中对应状态的初始值是number[]类型，比如const [playerCounts, setPlayerCounts] = useState<number[]>([])，这样子组件的类型推导会更精准。
• 你已经通过playerCount !== undefined确保了playerCount是number类型，所以拼接后的数组必然符合number[]的类型要求。

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