如何在 React 中用展开运算符更新嵌套对象属性

在 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 状态逻辑的基础能力。