React中使用Axios从Firebase获取数据时报response.forEach不是函数错误如何解决

报错原因 #

TypeError: response.forEach is not a function 报错的核心原因是：forEach 是仅JavaScript数组类型支持的方法，你当前调用该方法的response变量不属于数组类型。

常见场景与修复方案 #

• 先确认response的实际内容，在调用forEach前加一行代码 console.log(typeof response, response) 打印变量信息，绝大多数情况下response不是接口直接返回的数组，而是外层嵌套了结构的对象，真实可遍历的数组存在response.data、response.results、response.list这类子字段中，替换成对应字段调用forEach即可。
• 如果你用的是fetch方法发起请求，大概率是忘记解析原始响应对象：fetch接口请求直接拿到的是Response元对象，不能直接遍历，需要先执行const data = await response.json() 解析出接口返回的实际数据，再对解析后的data执行遍历操作。
• 加兼容代码避免异常阻塞：如果存在接口异常返回非数组内容的可能，遍历前先做类型判断，写法如下：

if (Array.isArray(response)) {
  response.forEach(item => {
    // 原有遍历逻辑
  })
}

• 核对变量名是否拼写正确，排查有没有把其他非数组类型的变量错当成接口返回的数组使用。

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