web-dev-qa-db-ja.com

axiosから返されたデータにアクセスするにはどうすればいいですか。

私は自分のreact jsコンポーネントからaxios getリクエストを行っているapiにajax関数があります。返されたデータにアクセスしてWebページに表示するにはどうすればよいですか。

reactjsaxios
6
LasyaPriya

あなたがやろうとしていることに依存しますが、これは一例です。

componentDidMount() {
  axios
    .get(`endpoint`)
    .then(res => this.setState({ posts: res.data }))
    .catch(err => console.log(err))
}

また、react-routerを使用して、ルーターからonEnter APIでajax呼び出しを行う場合も、良い方法です。

12
EQuimper

ReactおよびES2015を使用してこれを行う1つの方法を示します。以下の例のように、コンストラクターでデフォルトの状態を設定し、getリクエストを作成します。名前を入れ替えて、それはあなたのアプリケーションで動作します。次に、getリクエストのレスポンスから返される配列をマッピングします。もちろん、必要に応じて名前とスタイルを変更します。私はBootstrapを使用してこれが理解しやすいことを願っています。

  import React, { Component } from 'react'
  import axios from 'axios';
  import cookie from 'react-cookie';
  import { Modal,Button  } from 'react-bootstrap'
  import { API_URL, CLIENT_ROOT_URL, errorHandler } from '../../actions/index';

  class NameofClass extends Component {

      constructor(props) {
        super(props)

        this.state = {
          classrooms: [],
          profile: {country: '', firstName: '', lastName: '', gravatar: '', organization: ''}
        }
      }
      componentDidMount(){
        const authorization = "Some Name" + cookie.load('token').replace("JWT","")
          axios.get(`${API_URL}/your/endpoint`, {
            headers: { 'Authorization': authorization }
          })
          .then(response => {
            this.setState({
              classrooms:response.data.classrooms,
              profile:response.data.profile
            })
          })
          .then(response => {
            this.setState({classrooms: response.data.profile})
          })
          .catch((error) => {
            console.log("error",error)
          })
      }
      render () {
        return (
          <div className='container'>
            <div className='jumbotron'>
              <h1>NameofClass Page</h1>
              <p>Welcome {this.state.profile.firstName}  {this.state.profile.lastName}</p>
            </div>
            <div className='well'>
               {
                 this.state.classrooms.map((room) => {
                    return (
                      <div>
                        <p>{room.name}</p>
                      </div>
                    )
                 })
               }
            </div>
          </div>
        )
      }
    }

    export default NameofClass
5
pixel 67