如何在 React 中使用 `setState` 更新 `state.item[1]`？-js教程-PHP中文網

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

Linda Hamilton

發布： 2024-11-02 16:07:02

原創

630 人瀏覽過

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: ''
};

登入後複製

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

解決方案

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

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

示例實現：

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中文網其他相關文章！