反応でAxiosを使う

This tutorial was verified with Node.js v16.13.1, npm v8.1.4, react v17.0.2, and axios v0.24.0.

ステップ1 -プロジェクトにaxiosを追加する
この節では、Acidプロジェクトを作成する反応プロジェクトにAxiosを追加します.
“Npxの作成反応アプリはAxiosの例を反応させる”
プロジェクトにAxiosを追加するには、ターミナルを開き、ディレクトリをプロジェクトに変更します.
「CD反応axos例」
次に、このコマンドを実行してaxiosをインストールします.
NPMのインストール
次に、それを使用したいファイルにAxiosをインポートする必要があります.
ステップ2 - GETリクエストを作成する
この例では、新しいコンポーネントを作成し、Axiosを取得してGETリクエストを送信します.
あなたの反応プロジェクトの中で、あなたはpersonlistという名前の新しいコンポーネントを作成する必要があります.
最初に、srcディレクトリに新しいコンポーネントサブディレクトリを作成します
"mkdir src/コンポーネント"
このディレクトリで、personlistを作成します.JSとコンポーネントに次のコードを追加します.

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }

  render() {
    return (
      <ul>
        {
          this.state.persons
            .map(person =>
              <li key={person.id}>{person.name}</li>
            )
        }
      </ul>
    )
  }
}

まず、両方のコンポーネントで使用できるように反応とaxiosをインポートします.次に、コンポーネントのマウントライフサイクルフックにフックし、GETリクエストを実行します.
あなたはAxiosを使用します.APIのエンドポイントからURLを取得し、レスポンスオブジェクトを返すプロミスを取得します.レスポンスオブジェクトの内部には、データの値が割り当てられます.
また、要求についての他の情報を取得することができますなどのステータスコードのステータスや詳細についてはRES . Requestの内部のステータスコード.
あなたのアプリケーションにこのコンポーネントを追加します.js

import PersonList from './components/PersonList.js';

function App() {
  return (
    <div ClassName="App">
      <PersonList/>
    </div>
  )
}

次に、アプリケーションを実行します.
"NPMスタート"
ブラウザでアプリケーションを表示します.あなたは10名のリストが表示されます.
ステップ3 -ポストリクエストを作る

import React from 'react';
import axios from 'axios';

export default class PersonAdd extends React.Component {
  state = {
    name: ''
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const user = {
      name: this.state.name
    };

    axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

handlesubmit関数の中で、フォームの既定の動作を防ぎます.次に、ユーザー入力に状態を更新します.
Postを使用すると、同じ呼び出しオブジェクトを使用して、呼び出しの内部で使用できる情報を取得できます.
ポストリクエストを完了するには、まずユーザー入力をキャプチャします.その後、POSTリクエストと共に入力を追加します.その後、コンソールできます.フォームのユーザー入力を表示する応答をログ出力します.
ステップ4 -削除要求を作成する

import React from 'react';
import axios from 'axios';

export default class PersonRemove extends React.Component {
  state = {
    id: ''
  }

  handleChange = event => {
    this.setState({ id: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person ID:
            <input type="number" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

投稿ありがとうございます.