React中如何渲染API返回的嵌套对象内数组？解决map函数报错

首先，咱们来拆解你遇到的错误：TypeError: this.props.colors.map is not a function 本质是因为你传给子组件Color的colors不是数组，而是一个对象。

为什么会这样？ #

你调用的http://www.colr.org/json/colors/random/2接口返回的数据结构并不是直接的数组，而是一个嵌套了数组的对象，大概长这样：

{
  "colors": [
    {"id": "...", "hex": "..."},
    {"id": "...", "hex": "..."}
  ],
  // 其他额外字段...
}

而你现在的代码里直接把res.data（也就是整个返回对象）赋值给了state.colors，导致this.state.colors是个对象，对象自然没有map方法，所以触发了报错。

解决方法（不需要JSON.parse()） #

axios已经自动帮你把JSON格式的响应解析成JavaScript对象了，完全不需要手动调用JSON.parse()。你只需要从返回的对象里取出真正的数组字段colors即可：

修改App.js里的componentDidMount方法：

componentDidMount() {
  axios.get('http://www.colr.org/json/colors/random/2')
    // 从res.data中提取嵌套的colors数组
    .then(res => this.setState({ colors: res.data.colors }))
}

这样一来，this.state.colors就变成了真正的数组，子组件Color里的map方法就能正常遍历渲染了。

额外验证小技巧 #

你可以在then回调里加个console.log(res.data)，打印出接口返回的完整结构，确认res.data.colors确实是你需要的数组，这样能更直观地理解数据结构~

内容的提问来源于stack exchange，提问作者Mario Nezmah