javascript - 使用 ES6 嵌套在 Javascript 中时添加对象

Question

我正在尝试添加一个对象，但它似乎是覆盖而不是添加。

我有一个初始对象:

const config = {
    person: 'Bob',
    employer: 'yahoo',
}

我正在其他地方创建一个新对象，如下所示:

const newConfig = {
        ...config,
        customText: { [myVar]: messageText },
        [myVar]: selectedItem,
      };

myVar 可以是发送给 Bob 的消息或注释。

首先，您向 Bob 写入一条消息，因此 newConfig 如下所示:

const config = {
    person: 'Bob',
    employer: 'yahoo',
    customText: { message: 'hi bob!' }
}

但后来我添加了一个注释，我希望结果是:

const config = {
    person: 'Bob',
    employer: 'yahoo',
    customText: { message: 'hi bob!', note: 'please leave a message for Bob' }
}

相反，我的对象似乎被覆盖了。

const config = {
    person: 'Bob',
    employer: 'yahoo',
    customText: { note: 'please leave a message for Bob' }
}

我尝试过使用 Object.assign，但最终遇到了类似的难题。

const customText = Object.assign({}, newConfig.customText, {[myVar]: messageText});

我还尝试过对对象分配进行一些操作:

const newConfig = {
        ...config,
        customText[myVar]: messageText,
        [myVar]: selectedItem,
      };

但我收到解析错误:意外的标记，预期为“，”

如何添加对象而不覆盖它？

Answer 1

你也需要传播customText，否则它每次都会用新属性替换customText

const newConfig = {
        ...config,
        customText: {...config.customText, [myVar]: messageText },
        [myVar]: selectedItem,
};