如何在 React 中使用 `setState` 更新 `state.item[1]`？

如何使用 setState 更新 State.item[1]

在 React 應用程式中，更新陣列或物件的狀態可能很棘手。本文將引導您了解如何使用 setState 在狀態中更新 state.item[1]，這是 React 中常見的任務。

問題

在提供的 React 元件中，目標是建立使用者可以設計自己的欄位的動態表單。狀態最初看起來像這樣：

this.state.items[1] = {
  name: 'field 1',
  populate_at: 'web_start',
  same_as: 'customer_name',
  autocomplete_from: 'customer_name',
  title: ''
};

當使用者更改任何值時嘗試更新狀態時會出現問題。定位正確的物件變得很困難。

解決方案

要正確更新狀態，請按照以下步驟操作：

1. 製作專案的淺表副本。
2. 製作您想要變異的項目的淺表副本。
3. 替換您感興趣的屬性。
4. 將其放回數組中。請注意，您要在此處變更數組，這就是為什麼首先建立副本至關重要。
5. 將狀態設定為新副本。

示例實現：

handleChange: function (e) {
  // 1. Make a shallow copy of the items
  let items = [...this.state.items];
  // 2. Make a shallow copy of the item you want to mutate
  let item = {...items[1]};
  // 3. Replace the property you're intested in
  item.name = 'newName';
  // 4. Put it back into our array. N.B. we *are* mutating the array here, 
  //    but that's why we made a copy first
  items[1] = item;
  // 5. Set the state to our new copy
  this.setState({items});
}

替代實現：

• 結合步驟2 與3：

let item = {...items[1], name: 'newName'}

• 單行實作：

this.setState(({items}) => ({
  items: [
    ...items.slice(0, 1),
    {...items[1], name: 'newName'},
    ...items.slice(2)
  ]
}));

以上是如何在 React 中使用 `setState` 更新 `state.item[1]`？的詳細內容。更多資訊請關注PHP中文網其他相關文章！