React で `state.item[1]` を `setState` で更新するにはどうすればよいですか?

State.item を更新する方法[1] setState を使用する

React アプリケーションでは、配列またはオブジェクトの状態を更新するのは難しい場合があります。この記事では、React の一般的なタスクである setState を使用して状態の state.item[1] を更新する方法について説明します。

問題

提供された 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 で `state.item[1]` を `setState` で更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。