React渲染后端获取数据时报TypeError: listOfTours.map is not a function如何解决

报错根因 #

listOfTours.map is not a function 错误的本质是调用map方法时，listOfTours不是数组类型。你虽然初始化时将其设为空数组，但接口请求成功后赋值的response.data大概率为非数组类型，覆盖了初始值的数组类型。

你写的长度判断没有生效，是因为如果response.data是带length属性的非数组类型（比如字符串、带length属性的自定义对象、类数组结构），listOfTours.length > 0的判断会成立，但这类数据本身不具备数组的map方法，最终触发报错。

修复方案 #

• 先确认接口返回结构，在axios请求的then回调中打印response.data，确认你需要的旅游列表是否嵌套在返回结构内。绝大多数后端接口不会直接返回数组，而是会返回类似{ code: 200, data: [旅游列表], msg: '操作成功' }的包装结构，此时你需要取的是response.data.data而非整个response.data。
• 赋值前增加类型校验，避免非数组数据覆盖初始值，同时加兜底逻辑：

.then((response) => {
  if (response.data.status === "error") {
    console.log(response.data.status);
  } else {
    // 校验数据类型，非数组则返回空数组兜底
    // 若列表嵌套在其他字段下，替换response.data为对应字段即可
    const targetList = Array.isArray(response.data) ? response.data : []
    setListOfTours(targetList)
  }
})

• 可优化渲染前的判断逻辑，双重校验提升稳定性：

// 将原有的长度判断替换为类型+长度双重判断
if (Array.isArray(listOfTours) && listOfTours.length > 0) {
  // 原有列表渲染逻辑
}

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