我正在使用以下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返回带来的数据,但它不返回任何内容。
答案 0 :(得分:1)
您不应使生命周期方法异步。 创建一个异步函数并从生命周期方法内部调用它:
componentDidMount() {
axiosFunction()
}
async axiosFunction() {
const res= await axios.get('https://g6-ch2.herokuapp.com/api/usuarios/green'+id)
this.setState({
post: res.data
})
}
答案 1 :(得分: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
});