在 axios GET 请求中获取空对象

Posted 2023-02-22

【中文标题】在 axios GET 请求中获取空对象

【英文标题】：Getting empty object in axios GET request

【发布时间】：2018-07-07 00:15:47

【问题描述】：

我正在从 WordPress 博客网站中提取帖子。但是，当我在.then() 中控制台记录状态posts 和response 时，我得到Response 作为empty object [object object] 和state 作为undefined。

我哪里错了？

我也收到以下错误：

TypeError: 无法读取未定义的属性“地图”

代码：

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;

【问题讨论】：

当你设置state是posts一个空的或者未定义的数组？

只是console.log响应... axios响应返回对象数据键中的数据。

当我只返回response，console.log 仍然给我empty object 但这次我的状态值也为empty object。

【参考方案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);
);

【参考方案2】：

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

更新

this.setState(posts: response.posts);

到

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

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