更新嵌套狀態的命令式方法

在 React 中，狀態更新是不可變的。這意味著要更新嵌套物件或數組，您不能簡單地修改其屬性並期望變更反映在 UI 中。相反，您需要建立包含更新值的新物件或數組，然後將其傳遞給 setState。

考慮以下範例，其中我們要更新物件中索引 1 處的物件的 name 屬性儲存在狀態中的項目陣列：

handleChange: function (e) {
  // Make a copy of the items array
  let items = [...this.state.items];

  // Make a copy of the item object at index 1
  let item = {...items[1]};

  // Change the name property of the copied item
  item.name = 'New Name';

  // Replace the item at index 1 with the updated item
  items[1] = item;

  // Update the state with the new items array
  this.setState({items});
},

在這個方法中，我們使用擴充語法 (...) 建立 items 陣列和索引 1 處的 item 物件的淺拷貝。然後，我們修改複製項目的 name 屬性並取代索引 1 處的項目具有更新版本。最後，我們用新的 items 陣列更新狀態。

這種方法很簡單，並且適用於簡單的狀態更新。然而，對於涉及多個巢狀物件或陣列的複雜狀態更新來說，它可能會變得麻煩且容易出錯。