React中基于旧状态更新State时TypeScript报错的解决方法

解决React + TypeScript useState函数式更新的类型错误问题 #

1. 先修复箭头函数语法错误

你提供的简化版代码存在语法问题，这会导致TypeScript无法正确识别函数式更新：

// 错误写法：缺少花括号，return不能直接在箭头后使用
setUserInfo((prevState) => return prevState)

正确写法二选一：

// 简洁写法
setUserInfo((prevState) => prevState)
// 带花括号的标准写法
setUserInfo((prevState) => {
  return prevState;
})

2. 显式指定类型约束并处理undefined场景

你的state类型是UserInfo | undefined，在函数式更新时需要明确prevState的类型，同时确保返回值满足UserInfo的必填字段要求（错误提示显示UserInfo包含name、age、gender必填属性）：

setUserInfo((prevState: UserInfo | undefined) => {
  // 处理prevState为undefined的情况，避免返回不完整的UserInfo对象
  if (!prevState) {
    // 这里需保证补充所有必填字段的默认值，或确保someRef.current包含完整属性
    return {
      name: '',
      age: 0,
      gender: 'male',
      ...someRef.current
    };
  }
  // 已有状态存在时，合并更新属性
  return {
    ...prevState,
    ...someRef.current
  };
});

3. 检查UserInfo类型定义

确认你的UserInfo接口定义正确，必填属性没有被错误标记为可选：

interface UserInfo {
  name: string;
  age: number;
  gender: 'male' | 'female' | 'other';
}

如果业务允许部分属性可选，可调整为：

interface UserInfo {
  name?: string;
  age?: number;
  gender?: 'male' | 'female' | 'other';
}

4. 升级React类型定义（可选）

若以上方法无效，可能是@types/react版本过低导致的类型推断问题，执行命令升级到最新版本：

npm install @types/react@latest

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