使用價差語法ES6

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)

然后，我使用傳播語法創建一個新狀態並替換數組中的元素：

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

傳播語法/運算符用於將對象傳播為逗號分隔的鍵。

在您的狀態下，每個鍵都是有效負載ID，並且您想要替換該有效負載值中的一個條目，該值是一個數組。 因此，您需要按id轉到該有效負載，轉到該有效負載值數組中的索引，然后用新值替換該值。 下面的代碼應該給您預期的輸出，

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

檢查state和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);

檢查狀態和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和spread語法僅執行參考副本，而不執行深層副本，因此您需要使用某些深層克隆機制，例如esclone庫。