this.renderPosts()
将返回Promise
非实际数据,并且AFAIK Reactjs将不会在中隐式解析Promisesrender
。
你需要这样
componentDidMount() {
this.renderPosts();
}
renderPosts = async() => {
try {
let res = await axios.get('/posts');
let posts = res.data;
// this will re render the view with new data
this.setState({
Posts: posts.map((post, i) => (
<li key={i} className="list-group-item">{post.text}</li>
))
});
} catch (err) {
console.log(err);
}
}
render() {
return (
<div>
<ul className="list-group list-group-flush">
{this.state.Posts}
</ul>
</div>
);
}