从JSON Server获取数据时遇map未定义错误，需修改何处？

嘿，我来帮你搞定这个报错！你遇到的TypeError: Cannot read property 'map' of undefined，本质是因为你在处理API返回数据时搞错了结构，咱们一步步修正：

1. 修正API响应的数据提取逻辑 #

你请求的是http://localhost:8001/employees接口，JSON Server返回的直接就是员工数组（比如[{id:1, first_name:'张三', ...}, ...]），而不是嵌套在posts字段里的对象。你现在写的response.data.posts会拿到undefined，因为返回的数据里根本没有posts这个属性，这就导致this.state.posts变成了undefined，后续调用map自然会报错。

修改getPosts方法里的setState代码：

getPosts() { 
  axios.get("http://localhost:8001/employees") 
  .then(response => { 
    // 直接用response.data，而不是response.data.posts
    this.setState({ posts : response.data, isLoading: false }); 
  }) 
  .catch(error => this.setState({error, isLoading : false})); 
} 

2. 初始化state的posts为空数组 #

另外，建议在组件初始化state时，把posts设为空数组。这样即使在API请求完成前，render里的posts.map也能正常执行（空数组调用map不会报错）：

// 类组件的state初始化（两种方式选一种即可）
// 方式1：使用constructor
constructor(props) {
  super(props);
  this.state = {
    posts: [],
    isLoading: true,
    error: null
  };
}

// 方式2：使用类属性初始化语法
state = {
  posts: [],
  isLoading: true,
  error: null
};

3. 确认JSON Server的数据结构 #

最后检查你的db.json文件结构是否正确，应该是这样的：

{
  "employees": [
    {
      "id": 1,
      "first_name": "John",
      "last_name": "Doe",
      "email": "john@example.com"
    },
    {
      "id": 2,
      "first_name": "Jane",
      "last_name": "Smith",
      "email": "jane@example.com"
    }
  ]
}

这样请求/employees才会返回正确的员工数组。

修改完成后，重新启动JSON Server和你的React项目，应该就能正常渲染数据了！

内容的提问来源于stack exchange，提问作者Fernando Alexsandro Siregar