不能直接用展开运算符更新 usestate 的深层原始属性，因为展开运算符只做浅层拷贝，无法自动穿透嵌套结构；必须手动逐层展开并覆盖目标字段，确保每层都是新引用，否则会丢失未修改字段或违反不可变性。
不能直接用展开运算符对 useState 的深层原始属性做“解构式更新”，因为 React 状态是不可变的，而展开运算符（...）本身只做浅层拷贝——它无法自动穿透嵌套对象或数组更新深层字段。要安全更新深层原始属性（如 user.profile.age 或 items[2].name），必须手动构造新对象/数组，确保被修改路径上的每一层都是新引用。
为什么直接展开会失效？
常见错误写法：
const [state, setState] = useState({ user: { profile: { age: 25 } } });
// ❌ 错误：这不会更新 age，且破坏了不可变性
setState({ ...state, user: { ...state.user, profile: { age: 28 } } });
// → profile 变成全新对象，但丢失了 profile 下其他属性（如 name、city）
问题在于：{ age: 28 } 覆盖了整个 profile，而非仅更新 age 字段。深层更新必须“保留未修改字段 + 替换目标字段”。
正确做法：逐层展开 + 目标字段覆盖
对每层嵌套结构，用展开运算符保留原值，再显式覆盖目标字段：
- 更新对象深层属性：
{ ...obj, a: { ...obj.a, b: { ...obj.a.b, c: newValue } } } - 更新数组中某项的属性：
[...arr.slice(0, i), { ...arr[i], field: newValue }, ...arr.slice(i + 1)] - 组合使用：对象内含数组、数组内含对象，按路径依次展开
示例：更新 form.data.items[1].price
setState(prev => ({
...prev,
data: {
...prev.data,
items: prev.data.items.map((item, i) =>
i === 1 ? { ...item, price: 99.9 } : item
)
}
}));
用工具函数或库简化重复逻辑
手动逐层展开易出错、难维护。推荐两种轻量方案：
-
自定义 updatePath 工具函数：接收路径字符串（如
"user.profile.age"）和新值，返回更新后状态 -
使用 Immer：用可变语法写，底层自动产出不可变副本
import { produce } from 'immer';<br>setState(produce(draft => { draft.user.profile.age = 28; }));
Immer 不增加 bundle 体积显著，开发体验更直观，适合复杂嵌套场景。
关键原则与提醒
无论用原生展开还是工具，牢记三点：
- 所有被修改路径上的中间对象/数组必须是新引用（不能复用旧引用）
- 避免在事件处理中依赖闭包里的旧 state —— 用函数式更新
setState(prev => ...) - 原始类型（string/number/boolean）本身不可变，更新即替换；重点在于包裹它的对象/数组结构是否新建
不复杂但容易忽略：深层更新不是“语法糖问题”，而是不可变数据的必然要求。展开运算符只是辅助手段，真正起作用的是你构造的新对象层级结构。
