在 axios GET 请求中获取空对象
2018-01-28
7032
我正在从 WordPress 博客网站提取帖子。但是当我在
.then()
中控制台记录状态
posts
和
response
时,我得到的
Response
为
空对象 [object object]
,而
state
为
undefined
。
我哪里出错了?
我还收到以下错误:
TypeError: Cannot read property 'map' of undefined
代码:
import React, {Component} from 'react';
import axios from 'axios';
import Post from './Post/Post';
class Blog extends Component {
state = {
posts: []
}
componentDidMount(){
axios.get("https://public-api.wordpress.com/rest/v1.1/sites/ishhaanpatel.wordpress.com/posts")
.then( response => {
this.setState({posts: response.posts});
console.log("Here are the posts: "+ this.state.posts);
console.log("Here is the response: "+ response);
});
}
render(){
const posts = this.state.posts.map( post => {
return <Post title={post.title} key={post.ID} author={post.author.name} />;
});
return (
<div>
{posts}
</div>
);
}
}
export default Blog;
2个回答
您在使用
asyncronous
时遇到了问题。
setState
是
async
。因此,您不会立即获取
this.state.posts
中的值。
要解决此问题,您可以使用以下回调:
this.setState({ posts: response.posts }, () => {
console.log(this.state.posts);
});
此外,您的帖子嵌套在
response.data
中。因此,您的
setState
应类似于:
this.setState({ posts: response.data.posts }, () => {
console.log(this.state.posts);
});
Vishal
2018-01-28
您的数据嵌套在
response.data
对象内。
将
this.setState({posts: response.posts});
更新为
this.setState({posts: response.data.posts});
Axios 返回一个 HTTP 响应对象,其中包含有关响应的其他信息。
Jerguš Lejko
2018-01-28