React中API返回非数组对象调用map方法提示not a function怎么解决？

错误原因 #

map 是JavaScript数组专属的实例方法，你当前赋值给dataLoop的API返回值是普通对象，不具备map方法，所以调用时会抛出该类型错误。

问题定位步骤 #

• 先打印dataLoop的类型和实际值确认结构：在调用map前加一行console.log(typeof dataLoop, dataLoop)，即可确认你拿到的是对象而非数组，和给出的API返回结构匹配
• 确认你要遍历的目标字段：从给出的API结构看，可遍历的数组字段有三个：根层级的time数组、根层级的innerArray数组、innerArray每个元素下的Value数组

解决方案 #

场景1：需要遍历根节点下的innerArray数组 #

直接指定要遍历的数组字段即可，修改代码如下：

function Loop() {
    dataLoop.innerArray.map((inner: any) => {
        console.log('series =', inner);
        // 如果要取inner里的Value数组可以继续遍历：inner.Value.map(...)
    })
};

场景2：需要遍历整个对象的所有属性值 #

如果确实要遍历对象的所有属性，使用Object.values()、Object.keys()或者Object.entries()把对象转成数组后再遍历：

function Loop() {
    Object.values(dataLoop).map((val: any) => {
        console.log('属性值 =', val);
    })
};

额外注意事项 #

如果是React异步获取API数据，要注意初始值设置：如果初始值设的是{}空对象，在接口返回前调用map也会报错，建议初始值设为null，加判断再执行遍历逻辑：

function Loop() {
  // 先判断数据存在且innerArray是数组再执行遍历
  if(dataLoop?.innerArray && Array.isArray(dataLoop.innerArray)) {
    dataLoop.innerArray.map((inner: any) => {
      console.log('series =', inner)
    })
  }
}

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