在 React 函数组件中，若 state 是包含嵌套对象的普通 JavaScript 对象（如 myData.myPayloadInfo.someFlag），需通过多层展开运算符（...）实现不可变更新，避免直接修改原对象。
在 react 函数组件中，若 state 是包含嵌套对象的普通 javascript 对象（如 `mydata.mypayloadinfo.someflag`），需通过多层展开运算符（`...`）实现不可变更新，避免直接修改原对象。
在 React 中，状态更新必须遵循不可变原则——即不能直接修改现有 state 对象，而应创建新对象并传递给 `setState`。当需要更新深层嵌套属性（例如 `myPayloadInfo.someFlag`）时，需逐层展开：先展开外层对象，再展开内层对象，最后覆盖目标字段。以下是一个典型示例：
import React, { useState } from 'react';
function MyComponent() {
const [myData, setMyData] = useState({
myPayloadInfo: {
someVersion: 1,
someFlag: false
},
isOriginDetails: true,
originSuccessMsg: null
});
const toggleSomeFlag = () => {
setMyData(prev => ({
...prev, // 展开外层对象，保留 isOriginDetails、originSuccessMsg 等字段
myPayloadInfo: {
...prev.myPayloadInfo, // 展开内层 myPayloadInfo，保留 someVersion 等其他属性
someFlag: true // 仅覆盖目标属性
}
}));
};
return (
<div>
<p>Current flag: {myData.myPayloadInfo.someFlag ? 'true' : 'false'}</p>
<button onclick="{toggleSomeFlag}">Toggle someFlag</button>
</div>
);
}
export default MyComponent;
✅ 关键要点说明：
- 使用函数式更新 setMyData(prev => {...}) 可确保获取最新 state，尤其在连续多次更新或异步场景下更安全；
- 每一层都必须显式展开（...prev 和 ...prev.myPayloadInfo），否则会丢失未列出的属性；
- 切勿写成 myPayloadInfo: { ...myData.myPayloadInfo, someFlag: true }（引用旧 state 变量），而应始终基于 prev，防止闭包导致的状态陈旧问题；
- 若嵌套层级更深（如 a.b.c.d），需逐级展开：...prev.a, b: { ...prev.a.b, c: { ...prev.a.b.c, d: newValue } }。
⚠️ 注意事项：
- 此方法适用于普通对象嵌套；若涉及数组、Map、Set 或类实例等复杂结构，需额外处理；
- 频繁更新深层嵌套状态时，可考虑使用 Immer 简化逻辑，或重构 state 结构（如扁平化 key）提升可维护性。
掌握这种「分层展开 + 覆盖」模式，是编写健壮、可预测 React 状态逻辑的基础能力。
