Question

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

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请求，如下例所示。只需切换名称，使其适用于您的应用程序。然后映射数组，您将从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

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

2 个答案: