Question

我正在使用以下API：https://g6-ch2.herokuapp.com/api/usuarios/green。我正在尝试从中返回数据，但它不返回任何内容。

我正在使用路线参数。

这是代码

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中，这是我的代码未在渲染中返回任何内容的地方。

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中，我想从https://g6-ch2.herokuapp.com/api/usuarios/green返回带来的数据，但它不返回任何内容。

Answer 1

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

componentDidMount() {
    axiosFunction()
}

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

Answer 2

我认为您关于从axios获取响应主体的问题是因为您的api返回了响应，但您无法读取它。可以在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
  });

如何在React.js中返回从axios带来的数据？

2 个答案: