React setState如何为JSON对象空ModifiedBy字段赋值并支持更新

你当前代码失效的核心原因是useState的初始值设置错误：你把details的初始值设为了空字符串""（原始类型），第一次执行状态更新时对字符串做展开操作，根本无法生成预期的对象结构，自然没法正常给ModifiedBy字段赋值。

正确实现代码 #

首先把状态初始值改为空对象，再保留对象展开赋值逻辑即可——JS对象展开后重新给同名字段赋值，本身就同时兼容「字段不存在/为空时新增赋值」「字段已有值时覆盖更新」两种场景，不需要额外写分支判断：

// 注意：初始值从""改成{}，匹配你要存储的对象结构
const [details, setDetails] = useState({});

// 如果userInfo存在sessionStorage中，记得提前正确解析
// 参考写法：const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');

const handleCreateData = (e) => {
    setDetails((prev) => {
        // 加一层兜底，避免prev意外变成非对象类型时逻辑报错
        const prevData = typeof prev === 'object' && prev !== null ? prev : {};
        return { ...prevData, ModifiedBy: userInfo.name };
    });
}

逻辑说明 #

• 当ModifiedBy字段不存在/值为空时：展开操作不会携带这个字段，后续赋值会直接新增该字段，值为userInfo.name
• 当ModifiedBy字段已有值时：展开操作会先把旧值带出来，后续同名字段赋值会直接覆盖旧值，完成更新
• 增加的prevData兜底逻辑是为了避免其他位置误把details设置成字符串、null这类非对象值时，页面抛出JS运行错误

最终效果 #

赋值后得到的结构和你给出的示例完全一致：

{
  "ModifiedBy": "Ciaran Crowley"
}

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