如何访问从axios返回的数据使用react js显示在网页上？

Question

我在api中有一个ajax函数，我正在使axios从我的反应js组件获取请求。我如何访问返回的数据以在网页上显示它。

Answer 1

取决于你想要做的事情，但这是一个例子。

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

一个好方法也应该是如果您使用react-router从路由器的onEnter api进行ajax调用。

Answer 2

以下是使用React和ES2015进行操作的一种方法。 您将需要在构造函数中设置默认状态，并像下面的示例中那样获取请求。只需切换名称以使其与您的应用程序一起工作。然后映射您从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