React TypeScript 基于前值更新state时出现ts(2461)类型错误咨询

报错原因 #

你给friendList状态定义的类型是FriendListItem[] | null，初始值设为了null，而你在更新状态的回调里直接对prevstate做数组展开操作，你的tsconfig中已经开启了strict: true严格模式，TypeScript会检测到prevstate存在为null的可能性，null无法执行数组展开，所以抛出了这个错误。
另外还有一处隐藏的类型问题：你往数组中插入的是{ friend }，这是一个包含friend属性的对象，不符合你定义的FriendListItem接口结构，后续也会触发类型报错。

解决方案 #

方案1：修改状态初始值（最简便） #

把friendList的初始值从null改为空数组，同时去掉类型定义里的null，从根源上避免状态为空的情况：

// 修改前
const [friendList, setFriendList] = useState<FriendListItem[] | null>(null);
// 修改后
const [friendList, setFriendList] = useState<FriendListItem[]>([]);

同时调整状态更新逻辑，直接传入friend而不是包裹成对象：

setFriendList((prevstate) => [...prevstate, friend]);

方案2：保留null类型，更新时做空值兜底 #

如果你确实有业务需要让friendList可以为null，就在展开操作前加空值判断兜底：

setFriendList((prevstate) => [...(prevstate ?? []), friend]);

这里的??是空值合并运算符，当prevstate为null/undefined时，会自动用后面的空数组作为兜底值，保证被展开的永远是数组类型。

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