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

作者：袖梨 2026-07-24

在 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 } }。

⚠️ 注意事项：