web-dev-qa-db-ja.com

反応でaxiosからの応答の状態を設定する方法

Axiosでget応答の状態を設定するにはどうすればよいですか？

axios.get(response){
    this.setState({events: response.data})
}
reactjsaxios
37
jordanpowell88

ここに構文エラーがあります。代わりにこれを試してください

var self = this;
axios.get('/url')
 .then(function (response) {
   console.log(response);
   self.setState({events: response.data})
 })
.catch(function (error) {
   console.log(error);
});
//the rest of the code
var a = 'i might be executed before the server responds'

ここで注意すべきことがいくつかあります。

  • axios.getは非同期関数であり、残りのコードが実行されます。サーバーの応答が到着すると、thenに渡された関数が実行されます。 axios.get('url')の戻り値は、promiseオブジェクトと呼ばれます。読むことができます それについての詳細はこちら
  • thisキーワードは、呼び出される場所に応じて異なる値を持ちます。 this in this.setStateshouldはコンストラクターオブジェクトを参照し、関数内でthisを呼び出すと、 windowオブジェクトを参照します。それが、thisを変数selfに割り当てた理由です。読むことができます これについての詳細はこちら

プロのヒント：

ES6を使用する場合、矢印関数（独自のthisを持たない）を使用し、thisを変数に割り当てずにthis.setStateを使用します。 詳細はこちら

    axios.get('/url')
     .then((response) => {
       console.log(response);
       this.setState({events: response.data})
     })
    .catch((error)=>{
       console.log(error);
    });

完全な例は次のとおりです https://codesandbox.io/s/rm4pyq9m0o 含むベストプラクティスエラー処理、再試行してロードします。これにより、より優れたユーザーエクスペリエンスが得られます。コードを修正し、それについてさらに洞察を得るために遊んでみることをお勧めします。

112
Abdellah Alaoui

「これ」はaxiosの内部で異なるため、これは機能しません。 axios内の「this」は、反応コンポーネントではなく、axiosオブジェクトを指します。これは.bindで解決できます

また、axiosは適切に使用されていません。

それは次のように見えるはずです

axios.get("/yourURL").then(function(response) {
  this.setState({ events: response.data });
}.bind(this));

または、es6を使用する場合、矢印関数の関数をサブアウトして、バインドせずに同じ効果を得ることができます

axios.get("/yourURL").then(response => {
  this.setState({ events: response.data });
});
25
ceckenrode

このノードjsを試してください

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

react jsを使用している場合は、axiosを使用するよりも最初にコンポーネントをインポートします

このような：

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>{person.name}</li>)}
      </ul>
    )
  }
}
1
Rizo