React にデータがあるのにレンダリングできない場合はどうすればよいですか?

React にはデータがありますが、ソリューションをレンダリングできません: 1. コンストラクター メソッドで、getXXX メソッドを呼び出します。 2. getXXX メソッドで setState を設定します。 3. getXXX リクエストがサーバーから応答を受信したとき、 setState を実行すると、ページのレンダリングが再トリガーされるだけです。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

React にデータがあるのにレンダリングできない場合はどうすればよいですか?

react はバックグラウンド データを取得し、表示せずにページをレンダリングします。

## 問題の説明:

• 望ましい結果: バックグラウンド データを取得し、ページのレンダリング時に

  react の Component に表示します。初めて

• の試みを示します。

  getXXX メソッドがコンポーネントの外部で定義され、axios が使用されて このメソッドは Component のコンストラクターで呼び出され、このメソッドの結果は state 属性に割り当てられます。 #bug 結果: バックグラウンド データがリクエストを受信し、結果は正しく返されますが、ページはレンダリングされません。console

  を使用して、
GetXXX
• の結果を出力します。結果は正しいです。 .

  バグのトラブルシューティング: 決定 バックグラウンドはリクエストを受信して​​正しい結果を返し、フロントエンドも正しい結果を出力します。つまり、データが取得される前にページがレンダリングされます。ただし、react

  コンポーネントの読み込み順序は、最初にメソッドを構築してから、
render
• を呼び出すことです。したがって、これは非同期の問題のみである可能性があります

  分析: axios

  は非同期リクエストです。このメソッドは構築メソッドで呼び出されますが、結果はすぐには取得されませんしたがって、
state
• には結果メンバー変数が割り当てられ、結果は空である必要があるため、レンダリングされたページにはデータがありません。

  axios を使用してリクエストし、結果を取得した後、setState メソッドを使用して結果を

  state
に割り当てます。その結果、実行時にエラーが報告されます。これは、
• setState

  がページを更新するため、つまり、render メソッドを呼び出し、## を呼び出すため、無限ループが発生するためです。 render メソッドの #setState無限ループが発生します正しい解決策: コンストラクターで getXXX メソッドを呼び出しますを設定し、getXXX メソッド setState に を設定すると、ページが最初にレンダリングされます (データ結果は空になります)。サーバーからの応答に応じて、setState

  が実行されると、ページのレンダリングが再トリガーされます。リクエストの応答時間はサーバーの処理に関連しているため、応答時間が非常に短い場合、フロントエンドでは空のデータの結果が表示されません。バックグラウンドの応答時間が長い場合は、
Antd
• を追加できます。コンポーネント

  Spin をロード中、プロンプトがロード中です 推奨学習: 「react ビデオ チュートリアル #」

以上がReact にデータがあるのにレンダリングできない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。