React+TypeScript中如何部分更新useState的userData对象？

首先纠正你代码里的几个关键问题，再给出正确的部分更新实现：

当前代码的问题 #

• 拼写错误：setUserrData 应为 setUserData，这会直接导致状态更新函数调用失败
• 嵌套对象更新逻辑错误：直接替换auth和params会覆盖整个子对象，丢失原有未修改的属性（比如auth.moreInfo、auth.info.somethingElse以及params的其他属性）
• 滥用any类型：给prev指定any会丢失TypeScript的类型校验能力，没必要这么做

正确的部分更新实现 #

要保留原有属性的同时修改部分值，需要对每一层嵌套对象都使用扩展运算符...展开原有属性，再覆盖需要更新的字段，代码示例如下：

setUserData((prev) => ({
  // 保留userData根层级的所有原有属性（比如config）
  ...prev,
  auth: {
    // 保留auth层级的原有属性（比如moreInfo）
    ...prev.auth,
    info: {
      // 保留info层级的原有属性（比如somethingElse）
      ...prev.auth.info,
      // 只更新token字段
      token: newToken
    }
  },
  params: {
    // 保留params层级的其他原有属性
    ...prev.params,
    // 只更新someParam字段
    someParam: newParam
  }
}));

处理初始状态为undefined的情况 #

因为你初始化userData时没有传初始值（useState<userData>()），所以prev可能为undefined，建议补充初始值或者在更新时处理边界情况：

// 先定义符合userData类型的初始值
const initialUserData: userData = {
  auth: {
    info: { token: '', somethingElse: '' },
    moreInfo: { something: '' }
  },
  config: {}, // 替换为你的configDetails类型初始值
  params: {}  // 替换为你的paramsDetails类型初始值
};

// 初始化useState时传入初始值
const [userData, setUserData] = useState<userData>(initialUserData);

// 此时更新时prev不会是undefined，类型推导完全正常
setUserData((prev) => ({
  ...prev,
  auth: {
    ...prev.auth,
    info: {
      ...prev.auth.info,
      token: newToken
    }
  },
  params: {
    ...prev.params,
    someParam: newParam
  }
}));

这种部分更新嵌套对象的方式是完全可行的，核心就是保证每一层都展开原有属性，只修改需要更新的字段，避免整个子对象被替换。

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