React でネストされた状態を更新する方法: ステップバイステップ ガイド

React でのネストされた状態の更新

React アプリケーションのコンテキストでは、特定のプロパティを更新する必要がある状況に遭遇することがあります。深くネストされた状態オブジェクト。そのようなシナリオの 1 つは、ユーザーがフィールドを定義し、さまざまな詳細を指定できるフォームを構築する場合です。

シナリオ:

フォーム フィールドを表す初期状態オブジェクトがあります。フィールドはキーによって識別され、name や Populate_at などのプロパティがあります。ユーザーがフォーム コントロールを操作するときにこれらのプロパティを変更できるようにしたいと考えています。

課題:

状態内の特定のオブジェクトを更新の対象にすることは、特に難しい場合があります。ネストされたオブジェクトを使用する場合。

解決策:

state.item[1].name を更新するには、次の手順を使用できます:

1.状態オブジェクトの浅いコピーを作成します:

<code class="javascript">let items = [...this.state.items];</code>

2.更新する特定のアイテムの浅いコピーを作成します:

<code class="javascript">let item = {...items[1]};</code>

3.コピー内の目的のプロパティを置き換えます:

<code class="javascript">item.name = 'newName';</code>

4.更新された項目を状態オブジェクトのコピーに戻します:

<code class="javascript">items[1] = item;</code>

5.変更されたコピーに状態を設定します:

<code class="javascript">this.setState({items});</code>

または、手順 2 と 3 を 1 行にまとめることができます:

<code class="javascript">let item = {...items[1], name: 'newName'};</code>

1 行ソリューション:

配列スプレッド演算子を使用して更新全体を 1 行で実行する方法は次のとおりです:

<code class="javascript">this.setState(({items}) => ({
    items: [
        ...items.slice(0, 1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));</code>

注:

です。例の状態オブジェクトはプレーン オブジェクトを使用して構造化されていることに注意することが重要です。最新の React アプリケーションでは、状態管理に useState フックまたは Redux を使用することをお勧めします。

以上がReact でネストされた状態を更新する方法: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。