如何使用扩展运算符更新React嵌套对象中的someFlag属性

你的状态结构如下：

// 初始状态定义
const [myData, setMyData] = React.useState({
    myPayloadInfo: {
        "someVersion": 1,
        "someFlag": false
    },
    isOriginDetails: true,
    originSuccessMsg: null
});

要将myPayloadInfo中的someFlag更新为true，需通过逐层使用扩展运算符实现，确保遵循React不可变状态的要求：

setMyData(prevState => ({
    // 扩展外层状态，保留未修改的属性
    ...prevState,
    // 重新定义myPayloadInfo对象
    myPayloadInfo: {
        // 扩展原myPayloadInfo的所有属性
        ...prevState.myPayloadInfo,
        // 覆盖目标属性值
        someFlag: true
    }
}));

关键说明： #

• 外层的...prevState保留了isOriginDetails、originSuccessMsg等未修改的属性
• 内层的...prevState.myPayloadInfo保留了someVersion属性，仅更新someFlag
• 使用函数式更新（传入prevState）是为了确保获取到最新的状态值，避免闭包导致的状态不一致问题

内容的提问来源于stack exchange，提问作者copenndthagen