Изменить свойства объекта с помощью оператора распространения, потому что исходный объект был изменен?

Question

Извините за вопрос noob, но как изменился объект в исходном массиве? Я извлек небольшой фрагмент кода.

• Ожидаемый: mappedEvents.u получил дополнительное свойство, в то время как источник update not
• Случилось: и mappedEvents.u, и update.u имеют то же значение.

 const update= [
        {
            "_id": "2QK5mmqERN8dd6LaL",
            "open": true,
            "alert": false,
            "unread": 0,
            "userMentions": 0,
            "groupMentions": 0,
            "ts": "2019-09-20T03:20:50.927Z",
            "rid": "GENERAL",
            "name": "general",
            "t": "c",
            "u": {
                "_id": "5JzjbnZDcxKMYR2mv",
                "username": "honga",
                
            },
            "_updatedAt": "2020-01-02T06:34:53.747Z",
            "ls": "2020-01-02T06:34:53.681Z"
        },
        {
            "_id": "ox3hxbxdKpenLmyKT",
            "rid": "5JzjbnZDcxKMYR2mvyBShq8ZDfx9isv2sA",
            "u": {
                "_id": "5JzjbnZDcxKMYR2mv",
                "username": "honga",
                
            },
            "_updatedAt": "2020-01-16T10:32:43.414Z",
            "alert": false,
            "fname": "lolo",
            "groupMentions": 0,
            "ls": "2020-01-16T10:32:43.414Z",
            "name": "lol",
            "open": true,
            "t": "d",
            "ts": "2020-01-16T09:26:13.665Z",
            "unread": 0,
            "userMentions": 0
        }
    ];

const mappedEvents = update.map(e => {
  e.u = {...e.u,"avatarOrigin": "upload"};
  return e;
});
console.log({update});
console.log({mappedEvents});

Answer 1

Код все еще обращается к исходной ссылке на элемент, где вы изменяете свойство e.u. Это было отражено в исходном массиве. Если вы хотите создавать только новые элементы с .map(), вам нужно клонировать текущий элемент, а также то, что вы получаете в качестве параметра от .map().

Попробуйте следующее:

const update = [{"_id": "2QK5mmqERN8dd6LaL","u": {"_id": "5JzjbnZDcxKMYR2mv","username": "honga"}},{"_id": "ox3hxbxdKpenLmyKT","u": {"_id": "5JzjbnZDcxKMYR2mv","username": "honga",}}];

const mappedEvents = update.map(e => {
  const newElem = {...e};
  newElem.u = {...e.u,"avatarOrigin": "upload"};
  return newElem;
});
console.log({update});
console.log({mappedEvents});

Надеюсь, это поможет!