React中useState对象更新最佳实践：避免数据丢失与获取最新状态

你当前的写法存在两个核心问题：

• 直接修改 state 对象（user.age = 22）违反了 React 的state 不可变性原则，这种修改不会触发组件重新渲染，还可能导致后续状态逻辑混乱。
• setUser({ user }) 会把原状态包裹成新对象（最终结构变成 { user: { name: 'M', age: 22 } }），破坏原有数据结构，同时可能丢失未显式处理的属性。

以下是针对不同场景的最佳实践：

一、基础不可变更新（避免数据丢失） #

更新对象时必须创建原对象的副本，再修改目标属性，确保原 state 不被篡改。常用展开运算符（...）实现：

const [user, setUser] = useState({ name: 'M', age: 21 });

// 正确更新单个属性
setUser({
  ...user, // 复制原对象所有属性
  age: 22  // 覆盖需要更新的属性
});

这种写法既保留原对象的所有属性，又完成目标属性修改，同时能触发组件重新渲染。

二、嵌套对象的不可变更新 #

如果对象存在嵌套结构（比如 user.address.city），需要逐层复制嵌套对象，避免丢失深层属性：

const [user, setUser] = useState({
  name: 'M',
  age: 21,
  address: { city: 'Beijing', district: 'Chaoyang' }
});

// 正确更新嵌套属性
setUser({
  ...user,
  address: {
    ...user.address, // 复制原address对象
    city: 'Shanghai' // 更新目标属性
  }
});

三、函数式更新（确保获取最新状态） #

当更新逻辑依赖前一个状态，或者在嵌套方法、定时器、异步操作中更新时，必须使用函数式更新。因为 useState 的更新是异步的，直接引用 user 可能拿到旧状态值，而函数式更新会接收最新的 prevState 作为参数：

const [user, setUser] = useState({ name: 'M', age: 21 });

// 在嵌套方法中更新，确保拿到最新状态
const handleIncrementAge = () => {
  setUser(prevState => ({
    ...prevState,
    age: prevState.age + 1
  }));
};

// 连续多次更新也能保证状态正确
const handleMultipleUpdates = () => {
  handleIncrementAge();
  handleIncrementAge();
};

这种写法能确保每次更新都基于最新状态，不会出现状态覆盖或丢失的问题。

错误 vs 正确写法对比 #

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