React TypeScript修改数组对象状态时出现ts2461类型错误如何解决？

你为info状态定义的类型是{name: string; address: string;}[] | null，且初始值为null。扩展运算符...不能作用于null类型，TypeScript检测到info存在为null的可能性，因此抛出类型错误。

根据业务场景可以选择以下任意一种方案：

• 方案一（无特殊需求优先选）：移除类型中的null联合项，将初始值改为空数组
  把useState的声明修改为：

  const [info, setInfo] = useState<StateProps["info"]>([]);
  

  此时info永远是合法数组类型，扩展操作不会触发类型错误。
• 方案二（需要保留info为null的场景）：使用空值合并运算符做兜底
  修改setInfo调用逻辑，为可能为null的info提供空数组兜底：

  setInfo([...(info ?? []), { name: "foo", address: "bar" }]);
  

• 方案三（仅在info非空时才允许执行添加逻辑）：添加非空前置判断
  在执行数组操作前先判断info不为null，不符合条件直接终止逻辑：

  const nameHanlder = () => {
    if (!info) return
    setInfo([...info, { name: "foo", address: "bar" }]);
  };
  

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