开发者问题收集

在 axios GET 请求中获取空对象

2018-01-28
7032

我正在从 WordPress 博客网站提取帖子。但是当我在 .then() 中控制台记录状态 postsresponse 时,我得到的 Response空对象 [object object] ,而 stateundefined

我哪里出错了?

我还收到以下错误:

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 时遇到了问题。

setStateasync 。因此,您不会立即获取 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