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项目中经常使用到组件之间的数值传递,实现的方法很多,但是原理上基本大同小异。这篇文章将给大家介绍Vue 父子组件数据单向绑定与Vue 父子组件数据双向绑定的对比从而认识双向绑定
    2021-09-09
  • Vue使用pdfobject实现预览pdf的示例详解

    Vue使用pdfobject实现预览pdf的示例详解

    PDFObject 是一个 JavaScript 库用来在HTML中动态嵌入 PDF 文档。这篇文章主要为大家详细介绍了使用pdfobject实现预览pdf的功能,需要的可以了解一下
    2023-03-03
  • vue 导航内容设置选中状态样式的例子

    vue 导航内容设置选中状态样式的例子

    今天小编就为大家分享一篇vue 导航内容设置选中状态样式的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue+element-ui中form输入框无法输入问题的解决方法

    vue+element-ui中form输入框无法输入问题的解决方法

    很多初次接触element-ui的同学,在用到element form组件时可能会遇到input框无法输入文字的问题,下面这篇文章主要给大家介绍了关于vue+element-ui中form输入框无法输入问题的解决方法,需要的朋友可以参考下
    2023-04-04
  • 关于vite proxy跨域问题的解决

    关于vite proxy跨域问题的解决

    这篇文章主要介绍了关于vite proxy跨域问题的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Ant Design of Vue的树形控件Tree的使用及说明

    Ant Design of Vue的树形控件Tree的使用及说明

    这篇文章主要介绍了Ant Design of Vue的树形控件Tree的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue axios 二次封装的示例代码

    vue axios 二次封装的示例代码

    本篇文章主要介绍了vue axios 二次封装的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 解决修复报错Error in render:TypeError:Cannot read properties of undefined(reading ‘ipconfig‘)问题

    解决修复报错Error in render:TypeError:Cannot read&n

    这篇文章主要介绍了解决修复报错Error in render:TypeError:Cannot read properties of undefined(reading ‘ipconfig‘)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 使用vue实现滑动滚动条来加载数据

    使用vue实现滑动滚动条来加载数据

    在vuejs中,我们经常使用axios来请求数据,但是有时候,我们请求的数据量很大,那么我们如何实现滑动滚动条来加载数据呢,接下来小编就给大家介绍一下在vuejs中如何实现滑动滚动条来动态加载数据,需要的朋友可以参考下
    2023-10-10
  • Vue使用axios添加请求头方式

    Vue使用axios添加请求头方式

    这篇文章主要介绍了Vue使用axios添加请求头方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06

最新评论