React解析复杂JSON数据遇Uncaught TypeError: map非函数问题求助

错误根源 #

你碰到的Uncaught TypeError: items.data.map is not a function，核心问题是你调用map的目标不是数组：

• API返回的JSON结构里，items是整个响应对象，items.data是包含data数组、links、count的对象，而非可遍历的数组。
• 真正的数组数据在items.data.data这个层级。

修正步骤 #

1. 调整map的调用路径 #

把代码里的items.data.map改成items.data.data.map，只有这个层级才是可以用map遍历的数组。

2. 修正key和渲染内容 #

• 你当前用item.data作为key，但每个项目对象里并没有data属性，应该用唯一标识字段，比如item.project_id。
• 渲染的Continents: {item.data[0]}是错误的，每个item是项目实体，你可以根据需求渲染实际字段，比如项目标题、国家、预算等。

3. 初始化state（可选但推荐） #

为避免组件初始化阶段的潜在报错，建议给items设置匹配结构的初始值：

state = {
  DataisLoaded: false,
  items: { data: { data: [] } }
};

修正后的代码片段 #

.then((res) => res.json())
.then((json) => {
  this.setState({
    items: json,
    DataisLoaded: true
  });
})
}
render() {
  const { DataisLoaded, items } = this.state;
  if (!DataisLoaded) return <div>
    <h1> Loading data ... </h1> </div> ;

  return (
  <div className = "App">
    <h1> Fetch data from an api in react </h1> {
      items.data.data.map((item) => (
      <ol key = { item.project_id } >
        项目标题: {item.title}
        <br />
        国家: {item.country}
        <br />
        预算: {item.budget}
      </ol>
      ))
    }
  </div>
);
}
}    
export default App;

内容的提问来源于stack exchange，提问作者Jix Tang