命令的アプローチを使用して React のネストされた状態を更新するにはどうすればよいですか?

ネストされた状態を更新するための命令的アプローチ

React では、状態の更新は不変です。これは、ネストされたオブジェクトまたは配列を更新する場合、そのプロパティを変更するだけでは、その変更が UI に反映されることを期待できないことを意味します。代わりに、更新された値を含む新しいオブジェクトまたは配列を作成し、それを setState に渡す必要があります。

次の例を考えてみましょう。ここでは、インデックス 1 にあるオブジェクトの name プロパティを更新します。 items 配列は state:

<code class="javascript">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});
},</code>

に保存されます。このアプローチでは、スプレッド構文 (...) を使用して、インデックス 1 に items 配列と item オブジェクトの浅いコピーを作成します。次に、name プロパティを変更します。コピーされたアイテムのインデックス 1 のアイテムを更新されたバージョンに置き換えます。最後に、新しい項目配列を使用して状態を更新します。

このアプローチは簡単で、単純な状態の更新にはうまく機能します。ただし、複数のネストされたオブジェクトまたは配列が関与する複雑な状態の更新では、煩雑でエラーが発生しやすくなる可能性があります。

以上が命令的アプローチを使用して React のネストされた状態を更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。