将更新的值传播到对象中会删除未修改的属性

Question

I'm working on a reducer in Redux, and when trying to update an object by spreading both previous and updated objects into a new one, a property that's not being updated is being erased.

Code will explain it better:

Previous object:

previousObj: {
    name: 'Foo',
    category: 'Bar',
    projects: [{...}, {...}]
}

Update object:

updateObj: {
    name: 'Not Foo',
    category: 'Not Bar'
}

Then spreading both into a new one:

return {
    ...previousObj,
    ...updateObj
}

The result is the same as updateObj, meaning that the "projects" property, which had a few more objects in it, is gone. In my understanding, when spreading two objects into a new one, the latter properties will overwrite the previous ones if they share the same name, but untouched ones should keep untouched.

Am I missing something here?

Just for the sake of clarity, here's a snapshot of the actual code:

The log on line 12 has the exact same shape as previousObj, and the one on line 13 has the same shape as updateObj, just actual values were changed for simplicity. The result of it is that I can't access "projects" anymore after updating.

Any thoughts will be much appreciated!

Answer 1

I assume your code will be ending something like this:

what I can think of is that your spread object is being created correctly, did you try to assign that object to a variable and then return it? the purpose of this is that you check that the correct key/values are being created.

 const previousObj = { name: 'Foo', category: 'Bar', projects: [{ t: 'test1' }, { t: 'test2' }] } const updatedObj = { name: 'not Foo', category: 'not Bar' } const newObj = { ...previousObj, ...updatedObj } console.log(newObj) 

Also I can assume that your updatedObj is corrupted and therefore you have a problem with your spread object, check that updatedObj is not assigning something to the projects key, as the example below.

 const previousObj = { name: 'Foo', category: 'Bar', projects: [{ t: 'test1' }, { t: 'test2' }] } const updatedObj = { name: 'not Foo', category: 'not Bar', projects: undefined } const newObj = { ...previousObj, ...updatedObj } console.log(newObj) 

and the last would be that somewhere after you are returning the spread object (which will be completed) you are deleting or overriding the key.