web-dev-qa-db-fra.com

Comment puis-je accéder aux données renvoyées par un axios à afficher sur une page Web à l'aide de react js?

J'ai des fonctions ajax dans une API à laquelle je fais une requête get axios get de mon composant react js. Comment puis-je accéder aux données renvoyées pour les afficher sur la page Web.

reactjsaxios
6
LasyaPriya

Cela dépend de ce que vous essayez de faire, mais ceci est un exemple.

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

Un bon moyen devrait également être si vous utilisez react-router pour effectuer l'appel ajax avec l'api onEnter à partir du routeur.

12
EQuimper

Voici une façon de le faire avec React et ES2015. Vous voudrez définir l'état par défaut dans le constructeur et faire votre requête get comme dans l'exemple ci-dessous. Changez simplement les noms pour faire cela fonctionne avec votre application.Ensuite, mappez sur le tableau que vous récupérez de la réponse de la demande get. Bien sûr, changez les noms et les styles en fonction de vos besoins, j'utilise Bootstrap pour faire des choses faciles à comprendre. J'espère que cela vous aidera.

  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