ホームページ > ウェブフロントエンド > jsチュートリアル > setStateを使用してReactのState内のネストされたオブジェクトを更新する方法?

setStateを使用してReactのState内のネストされたオブジェクトを更新する方法?

Barbara Streisand
リリース: 2024-11-02 07:07:02
オリジナル
1071 人が閲覧しました

How to Update a Nested Object within State in React Using setState?

React で setState を使用してネストされた状態内のオブジェクトを更新する方法

React では、ターゲットを指定する必要があるネストされた状態オブジェクトがよく発生します。ユーザー入力に基づいて更新されます。次のコード スニペットを考えてみましょう。

var DynamicForm = React.createClass({
  getInitialState: function() {
   var items = {};
   items[1] = { name: 'field 1', populate_at: 'web_start',
                same_as: 'customer_name',
                autocomplete_from: 'customer_name', title: '' };
   items[2] = { name: 'field 2', populate_at: 'web_end',
                same_as: 'user_name', 
                    autocomplete_from: 'user_name', title: '' };

     return { items };
   },

  render: function() {
     var _this = this;
     return (
       <div>
         { Object.keys(this.state.items).map(function (key) {
           var item = _this.state.items[key];
           return (
             <div>
               <PopulateAtCheckboxes this={this}
                 checked={item.populate_at} id={key} 
                   populate_at={data.populate_at} />
            </div>
            );
        }, this)}
        <button onClick={this.newFieldEntry}>Create a new field</button>
        <button onClick={this.saveAndContinue}>Save and Continue</button>
      </div>
    );
  }
});
ログイン後にコピー

このコンポーネントでは、状態は、位置によってインデックス付けされた項目を含むネストされたオブジェクト items で構成されます。ただし、目的は、ユーザー操作時に items オブジェクト内の特定の項目を更新することです。

var PopulateAtCheckboxes = React.createClass({
  handleChange: function (e) {
     item = this.state.items[1];
     item.name = 'newName';
     items[1] = item;
     this.setState({items: items});
  },
  render: function() {
    var populateAtCheckbox = this.props.populate_at.map(function(value) {
      return (
        <label for={value}>
          <input type="radio" name={'populate_at'+this.props.id} value={value}
            onChange={this.handleChange} checked={this.props.checked == value}
            ref="populate-at"/>
          {value}
        </label>
      );
    }, this);
    return (
      <div className="populate-at-checkboxes">
        {populateAtCheckbox}
      </div>
    );
  }
});
ログイン後にコピー

上記のアプローチは状態の更新を試みますが、React でネストされた状態オブジェクトを変更する推奨される方法ではありません。不変性を確保し、望ましくない副作用を防ぐための正しいアプローチは、状態オブジェクトの浅いコピーを作成し、そのコピーを変更して、最後に変更されたコピーに状態を設定することです。

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 interested 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});
},
ログイン後にコピー

あるいは、より簡潔なアプローチを好む場合は、スプレッド構文を使用して 1 行で同じ結果を得ることができます:

this.setState(({items}) => ({
    items: [
        ...items.slice(0,1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));
ログイン後にコピー

以上がsetStateを使用してReactのState内のネストされたオブジェクトを更新する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート