React中出现TypeError: categories.map is not a function报错如何解决

TypeError: categories.map is not a function 本质是执行map方法时，categories变量不是数组类型，只有数组原型上才有map方法。

具体触发场景：

• 你虽然给categories设置了初始值为空数组[]，但接口请求成功后执行setCategories(res.data)时，后端返回的res.data不是数组类型：常见的情况是后端返回了嵌套结构的对象（比如{code:200, data: 分类数组, msg: "请求成功"}），这时候你直接赋值的res.data是外层对象，不是目标数组。
• 没有捕获接口请求的异常，一旦接口报错没有走成功逻辑，或者返回值为null/undefined，都会导致categories最终不是数组类型。

1. 先调试确认接口返回结构，赋值时做兼容处理，同时加异常捕获
   把你loadCategories的逻辑改成如下：

const loadCategories = async () => {
  try {
    const res = await API.get(endpoints['categories'])
    // 优先判断返回值是不是数组，不是的话取常用嵌套字段兜底，最终保底为空数组
    const cateList = Array.isArray(res.data) ? res.data : (res.data?.data || [])
    setCategories(cateList)
  } catch (err) {
    console.error('分类列表请求失败：', err)
    // 请求失败也赋值为空数组，避免渲染报错
    setCategories([])
  }
}

2. 渲染层加安全判断，同时补充map遍历必须的key属性
   把原来渲染分类的部分改成如下：

{Array.isArray(categories) && categories.map(c => (
  <Link className="nav-link" to="#link" key={c.id}>
    {c.name}
  </Link>
))}

以上调整完成后，不管接口返回什么异常格式，都不会触发map的类型报错。

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