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

Question

我在 api 中有 ajax 函数，我正在从我的 React js 组件向其发出 axios get 请求。如何访问返回的数据以在网页上显示。

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 实现的一种方法。您需要在构造函数中设置默认状态，并像下面的示例一样发出获取请求。只需切换名称即可使其与您的 application.Then 映射一起使用，该映射覆盖您从 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

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

How do I access data returned from an axios get to display on a web page using react js?

reactjs

axios