ReactJs使用axios获取分类数据调用map报is not a function错误

map 是仅数组类型支持的实例方法，你当前报错的核心原因是 this.state.category 最终不是数组类型：你调用的是按ID查询单条分类的接口，返回的 response.data 是单个分类对象，替换了初始设置的空数组，自然无法调用 map 方法。

分两种场景适配：

• 你确实要展示单条分类内容，不需要遍历，直接修改渲染逻辑即可：

render() {
    return (
        <div className="w-2/3 bg-red-100 h-60 m-auto mt-10">
            {/* 可选链语法避免初始为空时报错 */}
            <div>{this.state.category?.id}</div>
            {/* 其他字段同理直接取即可，比如分类名称：{this.state.category?.name} */}
        </div>
    );
}

• 你需要展示多条分类数据：
  1. 先检查后端接口返回的是否为分类数组，如果数组嵌套在返回对象的某个字段中，调整赋值逻辑即可，比如数据嵌套在 response.data.list 中就改为：

  this.setState({category:response.data.list});
  

  2. 也可以增加类型校验避免类型不匹配导致的报错：

  axios.get('http://127.0.0.1:8000/api/show/'+this.props.match.params.id)
  .then(response=>{
      const res = response.data
      // 仅当返回值为数组时才赋值，否则保持空数组
      this.setState({category: Array.isArray(res) ? res : []});
  })
  

内容的提问来源于stack exchange，提问作者Chaker.asm