React で状態を取得する方法: まず、対応する React コード ファイルを開き、次に React で「this.state.{property}」を通じて状態を直接取得できます。
このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。
反応で状態を取得するにはどうすればよいですか?
react では、this.state.{property} を通じて状態を直接取得できますが、状態を変更する場合、注意が必要な落とし穴が多くあります。
次の 3 つの一般的なトラップ:
1. 状態を直接変更することはできません。
コンポーネントは状態を変更し、レンダリングは再トリガーされません。例:
//错误 this.state.title='React'; 正确修改方式是使用setState(); //正确 this.setState({title:'React'});
2. 状態は非同期で更新されます
setState が呼び出されても、コンポーネントの状態はすぐには変更されません。変更される状態がイベント キューに入れられるだけです。実際の実行タイミングは最適化され、パフォーマンス上の理由により、複数の setState 状態変更が 1 つの状態変更にマージされる場合があります。したがって、次の状態を計算するために現在の状態に依存しないでください。状態の変更が実際に実行されるとき、依存する this.state が最新の状態であるとは保証されません。反応自体が複数の状態を 1 つにマージするためです。 .state は引き続き次の状態になります。 props の更新も非同期であるため、いくつかの状態変更前の状態は、現在の props に依存して次の状態を計算することもできません。 Eコマースアプリケーションの場合、ショッピングカート内で購入ボタンを1回クリックすると購入数量が1増加します。2回連続でクリックすると購入数量が2増加します。これは、次のコードを実行するのと同じです:
Object.assign( previousState, {quantity:this.state.quantity+1}, {quantity:this.state.quantity+1}, )
したがって、前の操作は上書きされ、最終的な購入数量は 1 だけ増加します。このとき、別の関数をパラメータとして setState として使用できます。この関数には 2 つのパラメータがあり、最初のパラメータは現在の状態 preState (このコンポーネントの状態が変更される前の状態) または最新の状態 (このコンポーネントの状態が更新された後の状態)、2 番目のパラメータは最新の props です。 。リストは次のとおりです:
//正确 this.setState((preState,props)=>({ counter:preState.quantity+1 }))
3. 状態の更新はマージ プロセスです
ssetState() を呼び出してコンポーネントの状態を変更する場合、変更された状態のみを渡す必要があります。コンポーネントの状態の更新はマージプロセスであるため、完全な状態ではなく状態です。たとえば、コンポーネントの状態は次のとおりです:
this.state({ title:'React', content:'React is an wondeful JS library' })
タイトルのみを変更する必要がある場合は、次のことのみを行う必要があります。変更されたタイトルを setState に渡します:
this.setState({title:'ReactJs'});
react は、元の状態のコンテンツを保持しながら、最新のタイトルを元の状態にマージします。最終的にマージされた状態は次のとおりです:
this.state({ title:'ReactJs, content:''React is an wondeful Js library })
関連する推奨事項: 「反応チュートリアル」
以上がReactで状態を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。