展開運算符在對象的數組內分配數據

Question

我需要使用擴展運算符更新以下狀態內的數據。 必須以這樣的方式完成data[0]應使用"vehOn":"Finance"

let state = {
  "data": [{
    "year": "2017",
    "make": "ALFA ROMEO",
    "model": "ILX 4D 2.0 PREMIUM PACKAGE"
  }],
  "error": ""
};

修改后的狀態應該是：

let modifiedstate = {
  "data": [{
    "year": "2017",
    "make": "ALFA ROMEO",
    "model": "ILX 4D 2.0 PREMIUM PACKAGE",
    "vehOn": "Finance"
  }],
  "error": ""
};

Answer 1

根據文檔，我可以看到實現結果的唯一方法是：

 let state = { "data": [{ "year": "2017", "make": "ALFA ROMEO", "model": "ILX 4D 2.0 PREMIUM PACKAGE" }], "error": "" }; let modifiedstate = { "data": [{ ...state.data[0], ...{vehOn: "Finance"} }], "error": ""}; console.log(modifiedstate);

Answer 2

 const state = { "data": [{ "year": "2017", "make": "ALFA ROMEO", "model": "ILX 4D 2.0 PREMIUM PACKAGE" }], "error": "" }; console.log("---- state ----"); console.log(state); const modifiedstate = { ...state, data: state.data.map((entry, i) => i === 0 ? ({ ...entry, vehOn: "Finance" }) : entry) }; console.log("---- modifiedstate ----"); console.log(modifiedstate);

Answer 3

如果您的意圖是創建一個與 state 相同的對象，並且您不知道state可以擁有哪些屬性，那么您應該尋找一種方法來深度克隆它

否則，如果您絕對確定state的結構並想要進行簡單的克隆，則可以執行以下操作：

   let modifiedstate = "data": [{
     ...state.data[0],
     "vehOn": "Finance"
     }],
     "error": ""
   }