javascript - Object.assign 正在修改原始数组对象

Question

我正在尝试修改我状态中特定索引的属性值此属性是 post_comments 但我的问题是状态正在被修改，即使我只是修改它的副本.. 代码按我想要的方式工作，但我正在修改状态，所以它可能很糟糕我该如何解决这个问题？

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
    // })
});

---

这是一个示例数据，由socket检测

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

这是我的状态

   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 用 Object.assign 方法记录同样的事情//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
  }
]

Answer 1

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

它正在执行数组的 shallow/reference 副本。

因此，原始数组在使用引用时被复制。

使用spread operator创建数组的新副本，然后执行 JSON.stringify，然后执行 JSON.parse。你需要一个深拷贝。

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