Как я могу вернуть данные, полученные из axios в React.js? - PullRequest
Новая
       33

Как я могу вернуть данные, полученные из axios в React.js?

1 голос
/ 05 апреля 2019

Я работаю с этим 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 , но ничего не возвращается.

Ответы [ 2 ]

1 голос
/ 05 апреля 2019

Вы не должны делать методы жизненного цикла асинхронными. Создайте асинхронную функцию и вызовите ее из метода жизненного цикла: 

componentDidMount() {
    axiosFunction()
}

async axiosFunction() {
    const res= await axios.get('https://g6-ch2.herokuapp.com/api/usuarios/green'+id)
    this.setState({
       post: res.data
    })
}
0 голосов
/ 05 апреля 2019

Я думаю, что ваша проблема с получением тела ответа от 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
  });
...