首頁  >  文章  >  web前端  >  如何在 React 中使用 `setState` 更新 `state.item[1]`?

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

Linda Hamilton
Linda Hamilton原創
2024-11-02 16:07:02555瀏覽

How to Update `state.item[1]` with `setState` in React?

如何使用 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn