1

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

我正在使用路由参数。

这是代码

应用程序.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;

主页.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返回带来的数据，但它没有返回任何内容。

4

2 回答 2

1

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

componentDidMount() {
    axiosFunction()
}

async axiosFunction() {
    const res= await axios.get('https://g6-ch2.herokuapp.com/api/usuarios/green'+id)
    this.setState({
       post: res.data
    })
}
于 2019-04-04T21:43:53.893 回答
0

我认为您关于从 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
  });
于 2019-04-04T21:41:08.297 回答