我如何 return 从 React.js 中的 axios 获取数据？

Question

我正在处理这个 API：https://g6-ch2.herokuapp.com/api/usuarios/green。我正在尝试从中 return 数据，但它没有 return 任何东西。

我正在使用路由参数。

这是代码

App.js:

import Home from './components/Home'
import About from './components/About'
import Contact from './components/Contact'
import Post from './components/Post'

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navbar/>
          <Route exact path='/' component={Home}/>
          <Route path='/about' component={About}/>
          <Route path='/contact' component={Contact}/>
          <Route path='/:post_id' component={Post}/>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Home.js:

import React,{Component} from 'react';
import axios from 'axios'
import {Link} from 'react-router-dom'

class Home extends Component{
    state={
        post:[]
    }
    async componentDidMount(){
            try{
                const res= await axios.get('https://g6-ch2.herokuapp.com/api/usuarios/green')
                this.setState({
                  post: res.data  
                })
            }catch(error){
                console.log(error)
            }

    }
    render(){
        const{post}=this.state
        const postList=post.length ? (
            post.map(post=>{
                return(
                    <div className="post card" key={post._id}>
                        <div className="card-content">
                            <Link to={'/'+post._id}>
                                <span className="card-title">
                                    {post.nombre}
                                </span>
                            </Link>
                            <p>{post.apellidos.paterno}</p>
                            <p>{post.apellidos.materno}</p>
                        </div>
                    </div>
                )
            })
        ):(
            <div className="center">No post yet</div>
        )
        return (
            <div className="center container">
                <h4 className="center">Home</h4>
                {postList}
            </div>
        );
    }
}

export default Home;

在Post.js这里我的代码没有return渲染任何东西。

Post.js:

import React, { Component } from 'react'
import axios from 'axios'

export default class Post extends Component {
    state={
        post:null
    }
    async componentDidMount(){
        let id = this.props.match.params.post_id;
        console.log(id)
        try{
            const res= await axios.get('https://g6-ch2.herokuapp.com/api/usuarios/green'+id)
            this.setState({
                post: res.data
            })
            console.log(res.data.nombre)
        }catch(error){
            console.log(error)
        }
    }
    render() {
        const post=this.state.post?(
            <div className="center">
                <p>{this.state.post.nombre}</p>
            </div>
        ):(
            <div className="center">Loading</div>
        )
        return (
        <div className="container">
            {post}
        </div>
        )
    }
}

在 Post.js 中，我想 return 来自 https://g6-ch2.herokuapp.com/api/usuarios/green 的数据，但它没有 returning 任何东西。

Answer 1

我认为你从 axios 获取响应主体的问题是因为你的 api 正在返回响应但你无法读取 it.You 可以访问你的响应对象然后调用 axios。

可以试试上面的axios调用吗

axios.get('https://g6-ch2.herokuapp.com/api/usuarios/green'+id)
  .then(function (response) {
       this.setState({
           post: response.data
       })
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Answer 2

您不应该使生命周期方法异步。创建一个异步函数并从生命周期方法内部调用它：

componentDidMount() {
    axiosFunction()
}

async axiosFunction() {
    const res= await axios.get('https://g6-ch2.herokuapp.com/api/usuarios/green'+id)
    this.setState({
       post: res.data
    })
}

我如何 return 从 React.js 中的 axios 获取数据？

How can I return data brought from axios in React.js?

javascript

reactjs

axios

axios-mock-adapter