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

Question

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

我有一个初始对象：

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

我正在其他地方制作一个新对象，如下所示：

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

myVar 可以是发送给 Bob 的 message 或 note。

首先，你写一个message给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,
      };

但是我得到了 Parsing error: Unexpected token, expected ","

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

Answer 1

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

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

Adding object when nested in Javascript with ES6