直接修改嵌套属性破坏不可变性，须逐层浅拷贝至目标字段再更新；如更新state.user.profile.address.city，需依次拷贝state、user、profile、address四层，最后替换city值。
在状态管理中，直接修改嵌套属性会破坏不可变性原则，导致 React 等框架无法正确触发更新或产生难以调试的副作用。浅拷贝本身不能直接更新嵌套属性，但它可以作为构建“不可变更新”的基础步骤——关键在于逐层浅拷贝到目标层级，再替换最内层对象。
为什么不能只用一次浅拷贝？
像 Object.assign({}, obj) 或 {...obj} 这类操作只复制第一层。如果要改 user.profile.address.city，只拷贝顶层会让 profile 和 address 仍指向原引用，修改后依然影响原始数据。
- 浅拷贝只隔离顶层，不触碰嵌套结构
- 要安全更新深层字段，必须对从根到目标路径上的每一级对象都做一次浅拷贝
- 这不是“浅拷贝的缺陷”，而是它被设计为轻量、可控的特性
手动逐层浅拷贝更新嵌套属性
以更新 state.user.profile.address.city 为例，推荐写法是自顶向下构造新对象：
- 先拷贝
state（顶层） - 再拷贝
state.user，并替换其profile - 再拷贝
state.user.profile，并替换其address - 最后拷贝
address，并更新city字段
代码示例：
立即学习“Java免费学习笔记（深入）”；
const newState = {
...state,
user: {
...state.user,
profile: {
...state.user.profile,
address: {
...state.user.profile.address,
city: 'Shanghai'
}
}
}
};
这种写法清晰、无依赖、兼容所有环境，适合明确知道嵌套路径的场景。
用工具函数简化重复逻辑
当嵌套较深或路径动态时，可封装一个通用更新函数，内部仍基于浅拷贝组合：
- 接收原对象、属性路径（如
['user', 'profile', 'address', 'city']）和新值 - 递归遍历路径，每层用展开运算符拷贝当前对象
- 到达倒数第二层时，返回带更新值的新对象
注意：该函数仍是浅拷贝策略，不涉及深克隆，性能可控，且完全避免 mutation。
React 中结合 useState 或 useReducer 的实际用法
在事件处理器中直接使用上述模式即可：
const updateCity = (newCity) => {
setState(prev => ({
...prev,
user: {
...prev.user,
profile: {
...prev.user.profile,
address: { ...prev.user.profile.address, city: newCity }
}
}
}));
};
useReducer 同理，在 reducer case 中返回新状态对象，保持每层浅拷贝链完整。这样 React 能准确识别引用变化，触发必要更新。
