React中Axios请求WordPress API返回空对象及map报错问题排查

让我帮你一步步解决这个问题，你的代码里有几个关键小问题导致了这些报错：

1. Axios 响应数据结构错误 #

WordPress API返回的数据被Axios包裹在response.data里，而非直接挂载在response对象上。你现在直接取response.posts肯定拿不到数据——这个属性根本不存在，所以this.state.posts会被设为undefined，进而触发map操作时的Cannot read property 'map' of undefined错误。

修复方法：把response.posts改成response.data.posts：

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

2. setState 是异步操作，不能立即获取更新后状态 #

你在setState之后立刻打印this.state.posts，此时状态还未完成更新，拿到的是旧状态值（初始空数组或undefined）。如果要查看更新后的状态，使用setState的第二个回调函数：

this.setState({posts: response.data.posts}, () => {
  console.log("Here are the posts: ", this.state.posts); // 这里能拿到更新后的posts
});

3. 对象打印方式错误 #

用字符串拼接的方式打印response，会触发对象的toString()方法，所以显示[object Object]。直接打印对象本身或用JSON.stringify就能看到完整结构：

console.log("Here is the response: ", response); // 直接打印对象
// 或者格式化打印，更易读
console.log("Here is the response: ", JSON.stringify(response, null, 2));

4. 增加错误处理，避免请求失败导致的报错 #

建议在请求链中加上.catch()处理网络或API返回错误，防止因请求失败导致posts始终为undefined而触发map报错：

axios.get("https://public-api.wordpress.com/rest/v1.1/sites/ishhaanpatel.wordpress.com/posts")
  .then( response => {
    // ... 你的状态更新逻辑
  })
  .catch(error => {
    console.error("请求出错了: ", error);
    // 设置默认空数组，避免渲染报错
    this.setState({posts: []});
  });

完整修复后的代码 #

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.data.posts}, () => {
          console.log("Here are the posts: ", this.state.posts);
        });
        console.log("Here is the response: ", response);
      })
      .catch(error => {
        console.error("请求失败：", error);
        this.setState({posts: []});
      });
  }

  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;

这样修改后，你的代码应该就能正常获取并渲染WordPress文章，不会再出现那些报错啦。

内容的提问来源于stack exchange，提问作者Ishan Patel