编辑以避免突变

Question

我使用扩展语法来替换数组中的对象，但我不能将该对象添加为数组的新条目。

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

首先，我找到要用此函数替换的元素的索引：

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

然后我使用spread语法创建一个新状态并替换数组中的元素：

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

但它返回了这个：

    {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
          }
        ]}

预期产出：

{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

您可以使用Object.assign更新找到的对象的属性（使用Array#find）。

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

Object.assign(object, payload.data);

Answer 2

Spread语法/运算符用于将对象扩展为逗号分隔的键。

在您的状态中，每个密钥都是有效负载ID，您希望在该有效负载值中替换一个条目，即一个数组。因此，您需要通过id转到该有效负载，转到该payloads值数组中的索引，并用新值替换该值。下面的代码应该给你预期的输出，

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

如果要替换该有效负载的完整数组，则应使用扩展语法，此处要替换该数组中的条目而不是完整数组。

编辑以避免突变

<强> 1。使用Object.assign将改变状态，

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

检查状态和＆amp; stateCopy被修改

<强> 2。使用扩展语法将改变状态，

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

检查状态和＆amp; staeteCopy被修改

第3。使用克隆来避免原始状态的突变，

安装esclone，

 #> npm install --savedev esclone

转到您的文件并添加导入

 import esclone from "esclone";

使用下面的代码来实现没有变异的预期输出，

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

检查原始状态未修改

注意： Object.assign＆amp; spread语法只执行引用副本而不是深层副本，因此您需要使用一些深度克隆机制，如esclone库。

使用Spread语法ES6

2 个答案:

编辑以避免突变