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

Question

I'm working with this API: https://g6-ch2.herokuapp.com/api/usuarios/green. I'm trying to return data from it, but it doesn't return anything.

I'm working with route parameters.

Here is the code

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;

Here in Post.js it's where my code is not returning anything in the render.

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>
        )
    }
}

In Post.js I want to return the brought data from https://g6-ch2.herokuapp.com/api/usuarios/green, but it's not returning anything.

score 1 · Accepted Answer · answered Apr 04 '19 at 21:43

You shouldn't make lifecycle methods async. Create a async function and call it from inside the lifecycle method:

componentDidMount() {
    axiosFunction()
}

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

score 0 · Answer 2 · answered Apr 04 '19 at 21:41

I think your problem about getting response body from axios because your api is returning response but you cant read it.You can access your response object then of axios call.

Can you try above axios call

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
  });

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

2 Answers2