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

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

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

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});
},

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

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