Reactアプリケーションでデータを取得します

動的なWebアプリケーションを構築するための主要なライブラリであるReactは、主にMVCアーキテクチャ内のビューレイヤーに焦点を当てています。 このチュートリアルでは、Web開発の基本的な側面を調査します。これは、Reactアプリケーション内のデータの取得と表示です。 プロジェクトに統合するためのさまざまなデータフェッチ戦略、それらの利点と短所、およびベストプラクティスを調べます。 最後に、Reactアプリケーションでデータ検索を効率的に管理する方法がわかります。

始めましょう

：

を使用して基本的なReactアプリを作成することから始めましょう。 create-react-app

このコマンドは、包括的なプロジェクト構造を生成します。

create-react-app react-data-fetcher

。

単純なサーバーREADME create-react-appデモンストレーションの目的では、シンプルなサーバー（

フレームワークを使用したPython 3アプリケーションとデータの永続性のRedis）は、引用符を取得するためのリモートAPIを提供します。 APIのシンプルさにより、React Data Fetchingプロセスに集中できます。

コンポーネント

hug

機能コンポーネントは、引用符の箇条書きのリストをレンダリングし、文字列の配列を入力として受け入れます。

このコンポーネントは、メインQuoteListコンポーネントの子であり、データの取得ステータスに基づいて条件付きレンダリングが採用されています。 Axiosでフェッチする

QuoteList

関数は、axiosを使用して、非同期データの取得を示します：

import React from 'react';

const QuoteList = ({ quotes }) => (
  quotes.map(quote => 

{quote}

) ); export default QuoteList;

App

関数は、axiosを使用した単純なPOSTリクエストを紹介します。

axios vs. fetch：a比較

このセクションでは、axiosとネイティブfetchQuotesAPIの重要な違いを強調しています。 AxiosはJSONデータ変換を簡素化し、リクエストタイムアウト処理やHTTPインターセプターなどの組み込み機能を提供します。 Axiosのインターセプターは、リクエストと応答を変更するための集中メカニズムを提供し、コードメンテナビリティを向上させます。 この例は、Axiosインターセプターの使用方法を示しています。 このチュートリアルでは、。

結論

fetchQuotes = () => {
    this.setState({ ...this.state, isFetching: true });
    axios.get(QUOTE_SERVICE_URL)
      .then(response => this.setState({ quotes: response.data, isFetching: false }))
      .catch(e => console.log(e));
};

このチュートリアルでは、ライフサイクル方法、ポーリング、進捗報告、エラー処理など、反応の非同期データを取り上げました。 axiosと

APIの比較は、それぞれの長所と短所を強調しました。 提供された情報は、Reactアプリケーションでデータ検索を効果的に管理できるようになります。 handleSubmit

この投稿は、Divya Devからの寄付により更新されました

以上がReactアプリケーションでデータを取得しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。