ReactJS报错TypeError: this.state.cakes.map is not a function问题排查

• Array.prototype.map()是仅数组类型可调用的方法，报错说明你当前this.state.cakes的实际类型不是数组
• 你打印的接口返回res.data是完整的响应结构体：{data: Array(3), status: "Success", message: null}，你直接把整个结构体赋值给了state.cakes，导致cakes变成了普通对象，自然没有map方法

1. 调整setState的赋值逻辑，取响应结构体里的data字段（也就是实际的蛋糕数组）赋值：
   把componentDidMount里的

this.setState({ cakes : res.data });

修改为

this.setState({ cakes : res.data.data });

2. 建议添加渲染兜底逻辑，避免后续接口异常返回非数组结构时再次出现同类报错：
   修改render里的map调用逻辑，先判断类型再执行遍历：

{
  Array.isArray(this.state.cakes) ? this.state.cakes.map(cake => 
    <React.Fragment>
      <div className="price"><h6>{ cake.price }</h6></div>
      <div className='info'>
        <h1 className='title'>{ cake.name }</h1>
        <p className='description'>{ cake.description }</p>
      </div>
    </React.Fragment>
  ) : null
}

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