Object.assign is modifying original array object

Question

I'm trying to modify a property value of a specific index in my state this property is the post_comments But my problem is the state is being modified even though i am only modifying the copy of it.. The code works how i want it to be but i'm modifying the state so it's probably bad how do i fix this?

socket.on('statusComment', (data) => {
    const mutator =  Object.assign([], this.state.getStatus);
    const index =  mutator.findIndex(i => i._id === data._id);
    mutator[index].post_comments = data.post_comments; // Replace old post_comments with data.post_comments 
    console.log(mutator) // Got the post_comments 
    console.log(this.state.getStatus) // Also modified 

    // Commented out setState
    // this.setState({
    //     getStatus: mutator
    // })
});

Here is a sample data detected by socket

const data = {
  post_id: "5b0689f03fb2fd1404f1854d",
  post_comments: [{text: 'what'}]
}

This is what my state looks like

   const data_arr = [
      {
        "post_img": [],
        "post_date": "2018-05-24T09:46:24.948Z",
        "post_comments": [
          {
            "comment_posted": "2018-05-24T09:46:31.015Z",
            "_id": "5b0689f73fb2fd1404f1854e",
            "comment_from": {
              "photo_url": "png",
              "_id": "5af16d60f3957c11e46500ae",
              "display_name": "Lumpo"
            },
            "comment_text": "kaka2"
          },
          {
            "comment_posted": "2018-05-24T09:47:42.752Z",
            "_id": "5b068a3e2fdd6f141d5ba995",
            "comment_from": {
              "photo_url": "png",
              "_id": "5af16d60f3957c11e46500ae",
              "display_name": "Lumpo"
            },
            "comment_text": "kaka!"
          }
        ],
        "_id": "5b0689f03fb2fd1404f1854d",
        "post_description": "get out\r\n",
        "post_by": {
          "photo_url": "png",
          "_id": "5af16d60f3957c11e46500ae",
          "display_name": "Lumpo"
        },
        "__v": 2
      }
    ]

Spread operator is not working logs the same thing with the Object.assign method // console.log(mutator)

[
  {
    "post_img": [],
    "_id": "5b0694cc7925c914e4d95dda",
    "post_description": "test",
    "post_by": {
      "_id": "5af16d60f3957c11e46500ae",
      "display_name": "Lumpo",
      "photo_url": "png"
    },
    "post_comments": [
      {
        "_id": "5b0694d67925c914e4d95ddb",
        "comment_from": {
          "photo_url": "png",
          "_id": "5af16d60f3957c11e46500ae",
          "display_name": "Lumpo"
        },
        "comment_text": "This comment should only be in the mutator ",
        "comment_posted": "2018-05-24T10:32:54.937Z"
      }
    ],
    "post_date": "2018-05-24T10:32:44.613Z",
    "__v": 0
  }
]

// console.log(this.state.getStatus);

[
  {
    "post_img": [],
    "_id": "5b0694cc7925c914e4d95dda",
    "post_description": "test",
    "post_by": {
      "_id": "5af16d60f3957c11e46500ae",
      "display_name": "Lumpo",
      "photo_url": "png"
    },
    "post_comments": [
      {
        "_id": "5b0694d67925c914e4d95ddb",
        "comment_from": {
          "photo_url": "png",
          "_id": "5af16d60f3957c11e46500ae",
          "display_name": "Lumpo"
        },
        "comment_text": "This comment should only be in the mutator ",
        "comment_posted": "2018-05-24T10:32:54.937Z"
      }
    ],
    "post_date": "2018-05-24T10:32:44.613Z",
    "__v": 0
  }
]

RIYAJ KHAN · Accepted Answer · 2018-05-24 10:32:51Z

2

const mutator =  Object.assign([], this.state.getStatus);

its doing shallow/reference copy of array.

So,original array is copied as it is using reference.

Use spread operator to create new copy of array and then do JSON.stringify followed by JSON.parse.U need a deep copy.

let mutator = [...this.state.getStatus];
mutator = JSON.parse(JSON.stringify(mutator));

edited May 24, 2018 at 10:32

answered May 24, 2018 at 10:23

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

markus paterson Over a year ago

It's doing the same thing the state still gets modified.

RIYAJ KHAN Over a year ago

Could u please share the this.state.getStatus output

RIYAJ KHAN Over a year ago

@markuspaterson please check the updates answer last line

markus paterson Over a year ago

Check my question i put the output there

markus paterson Over a year ago

Parsing the mutator works but is this ideal? Why do i need to do it ?

|

MBehtemam · Accepted Answer · 2018-05-24 10:25:01Z

1

you can copy your array something like this :

 const mutator =  [...this.state.getStatus];

answered May 24, 2018 at 10:25

MBehtemam

7,92917 gold badges68 silver badges111 bronze badges

1 Comment

HMR Over a year ago

Since the array has objects this is will not solve the mutation problem. You need to someArray.map(item=>(item._id===data._id)?{...item,newProp:data.newProp}:item)

Zoe Edwards · Accepted Answer · 2018-05-24 12:55:58Z

1

Object.assign([], this.state.getStatus)

[] is an array, ~~not an object~~. This is likely causing a problem.

Edit: See Josh’s comment, it is an object, but also an array. But the behaviour will be different to if it were an object object.

edited May 24, 2018 at 12:55

answered May 24, 2018 at 10:21

Zoe Edwards

13.8k3 gold badges28 silver badges45 bronze badges

2 Comments

Josh from Qaribou Over a year ago

It's an array and an object.

HMR Over a year ago

Since the array has objects this is will not solve the mutation problem. You need to someArray.map(item=>(item._id===data._id)?{...item,newProp:data.newProp}:item)

noa-dev · Accepted Answer · 2018-05-24 10:28:19Z

0

The quickest way to make a copy of an existing array without copying a reference is the following:

const mutator = this.state.getStatus.slice(0);

as described here https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

answered May 24, 2018 at 10:28

noa-dev

3,6419 gold badges36 silver badges73 bronze badges

1 Comment

HMR Over a year ago

Since the array has objects this is will not solve the mutation problem. You need to someArray.map(item=>(item._id===data._id)?{...item,newProp:data.newProp}:item)

HMR · Accepted Answer · 2018-05-24 11:37:35Z

0

Your state is an object containing an array of objects.

First you copy state and reset the array getStatus with getStatus mapped. When the status item is found that needs to change you copy that item but set post_comments with another value (see code below).

this.setState({
  ...this.state,//copy state
  getStatus: this.state.getStatus.map(//getStatus is a new array
    (item,index)=>
      (item._id===data._id)//if item._id is data._id
        ? {...item,post_comments:data.post_comments}//copy item but reset post_comments
        : item//not the item we are looking for, return item (not changed copy)
  )
})

If you need more help the please let me know.

Using JSON.parse(JSON.stringify(state))) will cause all components to re render even if their part of the state did not change (deep copy versus shallow copy). You can use shouldComponentUpdate to see if the state actually changed and tell react not to re render components where this did not happen. However; since you are deep copying everything (not only the items that changed) you cannot do this.

Here is an example of a base component that checks if the state passed to it actually changed reference and should re render:

import React from 'react';
class OnlyIfChanged extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.state !== this.props.state;
  }
}
export default OnlyIfChanged;

edited May 24, 2018 at 11:37

answered May 24, 2018 at 10:45

HMR

39.5k26 gold badges99 silver badges175 bronze badges

4 Comments

markus paterson Over a year ago

Works amazingly too but i don't understand it haha

HMR Over a year ago

@markuspaterson the spread syntax({...this.state}) makes a shallow copy of the state and the ,getStatus:this.state.getStatus.map re assigns the getStatus property of the shallow copied state. The this.state.getStatus.map maps the getStatus array to a new array, if the item with the correct id is found then item is copied using spread {...item} and post_comments is re assigned in that copy.

HMR Over a year ago

@markuspaterson Using JSON.parse(JSON.stringify(someObject)) is a far more expensive operation and has the disadvantage that every member of the state has a new reference (also the items that did not change). This would cause components to re render that don't need to re render.

HMR Over a year ago

@markuspaterson Updated my answer with the disadvantages using JSON.parse(JSON.stringify

Collectives™ on Stack Overflow

Object.assign is modifying original array object

5 Answers 5

9 Comments

1 Comment

2 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

1 Comment

2 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related