🔓 👩🏽‍🔧 🗜️ ReactでAxiosを使用する方法 👙 🔝 👨🏽‍🏭

この記事では、ReactでAxiosライブラリを使用する方法を学習します。

サーバーへのリクエストの例を使用してすべてを見て、受信したデータをテーブルに表示し、読み込みチェッカーコンポーネントを渡し、これらすべてをReactHooksを使用して見てみましょう。

Axiosとは何ですか？

Axiosは、ブラウザおよびPromiseベースのnode.jsで最も人気のあるHTTPクライアントの1つです。

Axiosは、リクエスト、サーバーからのレスポンスの受信、それらの変換、および自動的にJSONに変換することをサポートしています。

始める前に、新しいReactプロジェクトを作成しましょう。

npx create-react-app react-axios-table

それに入りましょう：

cd react-axios-table

プロジェクトデータ

プロジェクトのデータとしてオブジェクトの配列を使用します。

[
	{
		id: 101,
		firstName: 'Sue',
		lastName: 'Corson',
		email: 'DWhalley@in.gov',
		phone: '(612)211-6296',
		address: {
			streetAddress: '9792 Mattis Ct',
			city: 'Waukesha',
			state: 'WI',
			zip: '22178'
		},
		description: 'et lacus magna dolor...',
	}
]

データへのリンク

Axiosで動作するようにコンポーネントを構成する

Axiosライブラリをロードします。

npm i axios

axiosを、サーバーにリクエストを送信するコンポーネントにインポートします。

import axios from 'axios'

なぜならプロジェクトでは、React Hooksを使用し、useStateとuseEffectをインポートします（reactのフックについて詳しくはこちらをご覧ください）。

import React, { useEffect, useState } from 'react';

次に、次のコードをコンポーネントに追加します。

function App() {
  
  const [appState, setAppState] = useState();
  
  useEffect(() => {
    const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';
    axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState(allPersons);
    });
  }, [setAppState]);

 
  return (
    <div className="app">
    
    </div>
  );
}

export default App;

コードを詳しく見てみましょう。

const [appState, setAppState] = useState();

コンポーネント内の状態の状態を担当します。

 useEffect(() => {}, [setAppState])

useEffectは、setAppStateの変更を監視し、必要に応じて再レンダリングします

 const apiUrl=''

ここでリンクを置き換えます

axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState(allPersons);
    });

送信のget、その後、サーバーへのリクエストを保存受け取ったJSONの状態にデータ

チェックコンポーネントをダウンロードする

srcにコンポーネントフォルダを作成します。その中に、UserData.jsコンポーネントを作成し、次のコードを追加します。

function UserData(props) {

    const { persons } = props

    if (!persons || persons.length === 0) return <p> .</p>

    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>firstName</th>
                        <th>lastName</th>
                        <th>email</th>
                        <th>phone</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        persons.map((person) =>
                            <tr key={person.id}>
                                <td>{person.id}</td>
                                <td>{person.firstName}</td>
                                <td>{person.lastName}</td>
                                <td>{person.email}</td>
                                <td>{person.phone}</td>
                            </tr>
                        )
                    }
                </tbody>
            </table>
      </div>
    )
}

export default UserData

サーバーから受信したデータをコンポーネントの小道具に転送します。

 if (!persons || persons.length === 0) return <p> .</p>

サーバーからのデータがあるかどうかを確認します

{
                        persons.map((person) =>
                            <tr key={person.id}>
                                <td>{person.id}</td>
                                <td>{person.firstName}</td>
                                <td>{person.lastName}</td>
                                <td>{person.email}</td>
                                <td>{person.phone}</td>
                            </tr>
                        )
                    }

map メソッドを使用して、人と配列を調べ、人ごとに文字列を作成します。キーを忘れないでください。components

フォルダーにLoadingPersonsData.jsを作成し、次のコードを貼り付けます。

function OnLoadingUserData(Component) {
    return function LoadingPersonsData({ isLoading, ...props }) {
        if (!isLoading) return <Component {...props} />

        else return (
            <div>
                <h1>,  !</h1>
            </div>
        )
    }
}

export default LoadingPersonsData

上記のコードは、Reactの高次コンポーネントです。別のコンポーネントを小道具として受け取り、ロジックを返します。この場合、コンポーネントはisLoadingをチェックします。データの読み込み中に、読み込みメッセージを表示します。isLoadingがfalseになるとすぐに、データを含むコンポーネントを返します。App.jsに

変更を加えて、データの読み込みを確認できるようにしましょう。コンポーネントをApp.jsにインポートしましょう：

import UserData from './components/UserData'
import OnLoadingUserData from './components/OnLoadingUserData'

次のコードを追加します。

function App() {

  const DataLoading =  LoadingPersonsData(UserData);

  const [appState, setAppState] = useState(
    {
      loading: false,
      persons: null,
    }
  )

 useEffect(() => {
    setAppState({loading: true})
    const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';
    axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState({
      loading: false,
      persons: allPersons
       });
    });
  }, [setAppState]);


  return (
    <div className="app">
        <DataLoading isLoading={appState.loading} persons={appState.persons} />
    </div>
  );
}

export default App;

 const DataLoading =  LoadingPersonsData(UserData);

新しいコンポーネントを作成し、それを高次のコンポーネントと同等にして、UserData（データ表示コンポーネント）をラップします。

新しいプロパティloading：falseを状態に追加します。これにより、サーバーからのデータの読み込みを決定します。

<DataLoading isLoading={appState.loading} persons={appState.persons} />

コンポーネントをレンダリングし、小道具を高次のコンポーネントに渡します。cssを

いくつか追加して、データをロードすると、次のウィンドウが表示されます。サーバーへのget要求が正常に完了すると、データが受信されます。これで、RESTAPIでAxiosgetを使用する方法がわかりました。 ご質問やご提案がございましたら、コメント欄にご記入ください。喜んでお答えします。

ReactでAxiosを使用する方法

Axiosとは何ですか？

プロジェクトデータ

Axiosで動作するようにコンポーネントを構成する

チェックコンポーネントをダウンロードする

More articles: