React使用Axios获取分类数据后报loadedCategories.map不是函数错误求助

这个报错的核心是loadedCategories被赋值为了非数组类型的值，而map是仅数组可用的实例方法。你初始化时给的默认值是空数组没问题，问题出在接口请求后的赋值逻辑。

• 第一步：确认接口返回结构
  你代码里打了console.log(response)，打开控制台看response.data的实际内容：绝大多数后端接口不会直接返回数组，会在外层包裹一层业务状态码、提示信息的结构，类似下面的格式：

// 常见的接口返回结构示例
{
  code: 200,
  msg: "success",
  data: [/* 真正的分类数组在这一层 */]
}

如果是这种结构，你之前直接setloadedCategories(responseData)相当于把整个外层对象赋值给了状态，自然没有map方法，改成取内层的数组字段即可：

// 假设真实数组在responseData.data里，根据你实际的返回字段调整
setloadedCategories(responseData.data ?? [])

如果确认接口直接返回的是数组格式，但打印出来是字符串类型，说明axios没自动解析JSON，手动转一下就行：setloadedCategories(JSON.parse(responseData) ?? [])

• 第二步：加类型兜底，避免异常报错
  不管接口返回什么结构，赋值前先判断是不是数组，永远保证状态是数组类型，从根源避免这个报错：

const responseData = response.data
// 新增判断：是数组就直接赋值，否则优先取返回里的data字段兜底，再不行就赋值空数组
const finalData = Array.isArray(responseData) ? responseData : (Array.isArray(responseData.data) ? responseData.data : [])
setloadedCategories(finalData)

• 第三步：可选优化渲染逻辑
  你的初始默认值已经是空数组，渲染时的loadedCategories &&判断是多余的，空数组调用map也不会报错，直接写即可：

return (
  <ul>
    {loadedCategories.map((categories) => (
      <li key={categories.id}>
        <span>{categories.name}</span>
      </li>
    ))}
  </ul>
)

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