TypeError:res.forEach is not a function报错解决办法

 更新时间:2023年07月27日 10:58:57   作者:满满耶  
这篇文章主要给大家介绍了关于TypeError:res.forEach is not a function报错的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

出现报错:

首先注意forEach中的“E”要大写。

报错有2种可能原因:

  1. 原因是使用foreach()方法用过遍历的应该是数组才对,所以使用Array.from()方法将遍历对象转化为数组
  2. 原因是遍历的对象不对,可能对象中有好几层data,需要console.log( res );看看

原因一:

错误代码:

res.forEach(v=>{
            leftArr.push({
                id:v.id,
                name:v.name
            })
        })

解决办法:加一行代码 res = Array.from(res);

正确代码:

res = Array.from(res);
        res.forEach(v=>{
            leftArr.push({
                id:v.id,
                name:v.name
            })
        })

原因二:

以此项目为例,执行了console.log( res );后可以看到(下图)res其实是一个对象,里面包含了3层data,我要拿到的是第三层data中的数据,而前面说过forEach遍历的应该是数组才对,这里的res是一个对象所以会报错。

解决办法:

在此例中要解决报错且正确拿到数据,就要取到第三层data,此时才是数组。即把

res.forEach()改为res.data.data.forEach() ,就可以了。(具体加几个data要看自己res的对象里有几层data,比如有2层的话,那么取到第二层data就只需要res.data.forEach() 就可以了)

错误代码:

res.forEach(v=>{
            leftArr.push({
                id:v.id,
                name:v.name
            })
        })

正确代码:

res.data.data.forEach(v=>{
            leftArr.push({
                id:v.id,
                name:v.name
            })
        })

总结 

到此这篇关于TypeError:res.forEach is not a function报错解决的文章就介绍到这了,更多相关TypeError:res.forEach is not a function内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue组件化常用方法之组件传值与通信

    Vue组件化常用方法之组件传值与通信

    这篇文章主要给大家介绍了关于Vue组件化常用方法之组件传值与通信的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Vue3中watchEffect的用途浅析

    Vue3中watchEffect的用途浅析

    这篇文章主要给大家介绍了关于Vue3中watchEffect用途的相关资料, watch和watchEffect都是监听器,但在写法和使用上有所区别,本文进行了详细的介绍,需要的朋友可以参考下
    2021-07-07
  • 探索Vue中组合式API和选项式API的用法与比较

    探索Vue中组合式API和选项式API的用法与比较

    Vue3为我们开发提供了两种组件逻辑实现方式:选项式API和组合式API,本文将尝试为大家分析什么是选项式API和组合式API,以及两种API的优缺点,希望对大家有所帮助
    2023-12-12
  • vant的Loading加载动画组件的使用(通过接口拿数据时显示加载状态)

    vant的Loading加载动画组件的使用(通过接口拿数据时显示加载状态)

    这篇文章主要介绍了vant的Loading加载动画组件的使用,通过接口拿数据时显示加载状态,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Vue中实现v-for循环遍历图片的方法

    Vue中实现v-for循环遍历图片的方法

    这篇文章主要介绍了Vue中实现v-for循环遍历图片的方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue实现购物车抛物线小球动画效果的方法详解

    vue实现购物车抛物线小球动画效果的方法详解

    这篇文章主要介绍了vue实现购物车抛物线小球动画效果的方法,结合实例形式较为详细的分析了vue.js实现抛物线动画效果购物车功能相关原理与操作注意事项,需要的朋友可以参考下
    2019-02-02
  • Vue中子组件向父组件传值以及.sync修饰符详析

    Vue中子组件向父组件传值以及.sync修饰符详析

    .sync 修饰符所提供的功能,当一个子组件改变了一个prop的值时,这个变化也会同步到父组件中所绑定,下面这篇文章主要给大家介绍了关于Vue中子组件向父组件传值以及.sync修饰符的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue+canvas如何实现根据数据展示不同高度,不同渐变颜色的长方体效果

    vue+canvas如何实现根据数据展示不同高度,不同渐变颜色的长方体效果

    这篇文章主要介绍了vue+canvas如何实现根据数据展示不同高度,不同渐变颜色的长方体效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-09-09
  • 如何利用Echarts根据经纬度给地图画点画线

    如何利用Echarts根据经纬度给地图画点画线

    最近工作中遇到了一个需求,需要利用echarts在地图上面标记点位,所下面这篇文章主要给大家介绍了关于如何利用Echarts根据经纬度给地图画点画线的相关资料,需要的朋友可以参考下
    2022-05-05
  • Vue路由对象属性 .meta $route.matched详解

    Vue路由对象属性 .meta $route.matched详解

    今天小编就为大家分享一篇Vue路由对象属性 .meta $route.matched详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论