Question

我正在从WordPress博客网站上发帖子。但是当我在posts中控制日志状态response和.then()时，Response为empty object [object object]，state为undefined。

我哪里错了？

我也遇到以下错误：

TypeError：无法读取属性＆＃39; map＆＃39;未定义的

代码：

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;

Answer 1

您遇到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);
});

Answer 2

您的数据嵌套在response.data对象中。

更新

this.setState({posts: response.posts});

到

this.setState({posts: response.data.posts});

Axios返回一个HTTP响应对象，其中包含有关响应的其他信息。

在axios GET请求中获取空对象

2 个答案: