使用价差语法ES6

Question

I am using spread syntax to replace an object in an array but I can't the object is added as a new entry of my array.

state = {8xf0y6ziyjabvozdd253nd:[
  {
    "id": "894tuq4ut84ut8v4t8wun89g",
    "parentId": "8xf0y6ziyjabvozdd253nd",
    "timestamp": 1503045227866,
    "body": "Hi there! I ams a COMMENTSsg.",
    "author": "thingtwo",
    "voteScore": 143,
    "deleted": false,
    "parentDeleted": false
  },
]}

First I find the index of the element that I want to replace with this function:

let index = state[payload.id].findIndex((element)=> element.id === payload.data.id)

And then I use the spread syntax to create a new state and replace the element inside of the array:

return { ...state,
                [payload.id]:[...state[payload.id],index=payload.data]
            }

But it returns this:

    {8xf0y6ziyjabvozdd253nd:[
          {
            "id": "894tuq4ut84ut8v4t8wun89g",
            "parentId": "8xf0y6ziyjabvozdd253nd",
            "timestamp": 1503045227866,
            "body": "Hi there! I am a COMMENTS.",
            "author": "thingtwo",
            "voteScore": 143,
            "deleted": false,
            "parentDeleted": false
          },
          {
            "id": "894tuq4ut84ut8v4t8wun89g",
            "parentId": "8xf0y6ziyjabvozdd253nd",
            "timestamp": 1503045227866,
            "body": "Hi there! I am a COMMENTS Replace",
            "author": "thingtwo",
            "voteScore": 143,
            "deleted": false,
            "parentDeleted": false
          }
        ]}

The expected output:

{8xf0y6ziyjabvozdd253nd:[
              {
                "id": "894tuq4ut84ut8v4t8wun89g",
                "parentId": "8xf0y6ziyjabvozdd253nd",
                "timestamp": 1503045227866,
                "body": "Hi there! I am a COMMENTS Replace",
                "author": "thingtwo",
                "voteScore": 143,
                "deleted": false,
                "parentDeleted": false
              }
            ]}

Answer 1

You might use Object.assign for updating properties of the found object (with Array#find ).

let object = state[payload.id].find((element)=> element.id === payload.data.id);

Object.assign(object, payload.data);

Answer 2

Spread syntax/operator is used to spread an object into comma separated keys.

In your state, every key is payload id and you want replace one entry in that payloads value, which is an array. So you need to go to that payload by id, go to the index in that payloads value array and replace that value with new value. below code should give you the expected output,

let index = state[payload.id].findIndex((element)=> element.id === payload.data.id);
state[payload.id][index] = payload.data;
console.log(state);

You should use spread syntax when you want to replace the complete array for that payload, and here you want to replace an entry in that array and not complete array.

Edit for avoiding mutation

1. Using Object.assign will mutate state,

let index = state[payload.id].findIndex((element)=> element.id === payload.data.id);
let stateCopy = Object.assign({}, state);
stateCopy[payload.id][index] = payload.data;
console.log(state);
console.log(stateCopy);

Check both state & stateCopy gets modified

2. Using spread syntax will mutate state,

let index = state[payload.id].findIndex((element)=> element.id === payload.data.id);
let stateCopy = {...state}
stateCopy[payload.id][index] = payload.data;
console.log(state);
console.log(stateCopy);

Check both state & staeteCopy gets modified

3. Use cloning to avoid mutation of original state,

install esclone,

 #> npm install --savedev esclone

go to your file and add import,

 import esclone from "esclone";

And use below code to achieve the expected output without mutation,

let index = state[payload.id].findIndex((element)=> element.id === payload.data.id);
let stateCopy = esclone(state);
stateCopy[payload.id][index] = payload.data;
console.log(state);
console.log(stateCopy);

Check original state is not modified

Note: Object.assign & spread syntax performs only a reference copy and not deep copy, hence you need to use some deep clone mechanism like esclone library.