关于Uncaught(in promise)TypeError: list is not iterable报错解决

 更新时间:2023年08月04日 09:33:02   作者:不悔0.0  
这篇文章主要给大家介绍了关于Uncaught(in promise)TypeError: list is not iterable报错的解决方法,文中通过示例代码介绍的非常详细,对大家学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下

最近在项目中遇到 Uncaught (in promise) TypeError: list is not iterable 报错,虽然不影响代码运行,但是看着报错感觉有点难受,试试能不能解决它

看了很多篇文章,都是说使用 Object.keys() 可以解决问题

formatTree2(list) {
      for (const item of Object.keys(list)) {
        if (list[item].children && list[item].children.length === 0) {
          delete list[item].children
        } else {
          this.formatTree2(list[item].children)
        }
      }
    },

就先使用 Object.keys() 看看,代码运行之后

因为 Object.keys() 传入的是 null 和 undefined 时就会出现这种问题,如何解决呢,试试加条件判断

formatTree2(list) {
      if (list) {
        for (const item of Object.keys(list)) {
          if (list[item].children && list[item].children.length === 0) {
            delete list[item].children
          } else {
            this.formatTree2(list[item].children)
          }
        }
      }
    },

添加条件判断之后,确实能够解决,代码正常运行,也不报错了,很好

仔细琢磨一下,感觉加条件判断的话是不是可以不使用 Object.keys() 呢,值得一试

formatTree2(list) {
      if (list) {
        for (const item of list) {
          if (item.children && item.children.length === 0) {
            delete item.children
          } else {
            this.formatTree2(item.children)
          }
        }
      }
    },

代码运行之后,功能正常也不报错,确实是可以的

总结一下:

使不使用 Object.keys() 其实都可以,主要的关键点在于添加条件使得 list 在不为null或undefined时执行代码,如果为了保险起见可以添加 Object.kes() ,看项目需求吧

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

相关文章

  • VUE项目中调用高德地图的全流程讲解

    VUE项目中调用高德地图的全流程讲解

    这篇文章主要介绍了VUE项目中调用高德地图的全流程讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue项目首屏性能优化组件实战指南

    Vue项目首屏性能优化组件实战指南

    Vue众所周知是一个轻量级的框架,源码仅仅为72.9KB,但是也有它自己的缺点,就是首屏加载会比较慢,这篇文章主要给大家介绍了关于Vue项目首屏性能优化组件的相关资料,需要的朋友可以参考下
    2021-11-11
  • Vue的事件响应式进度条组件实例详解

    Vue的事件响应式进度条组件实例详解

    这篇文章主要介绍了Vue的事件响应式进度条组件的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • vue封装form表单组件拒绝重复写form表单

    vue封装form表单组件拒绝重复写form表单

    这篇文章主要为大家介绍了vue封装form表单组件拒绝重复写form表单的实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 一篇超完整的Vue新手入门指导教程

    一篇超完整的Vue新手入门指导教程

    这篇文章主要给大家介绍了关于Vue入门的相关资料,是一篇超完整的Vue入门教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue使用highcharts自定义仪表盘图表

    vue使用highcharts自定义仪表盘图表

    这篇文章主要为大家详细介绍了vue使用highcharts自定义仪表盘图表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 关于vue 项目中浏览器跨域的配置问题

    关于vue 项目中浏览器跨域的配置问题

    这篇文章主要介绍了vue 项目中浏览器跨域的配置问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • Vue 权限控制的两种方法(路由验证)

    Vue 权限控制的两种方法(路由验证)

    这篇文章主要介绍了Vue 权限控制的两种方法(路由验证),每种方法给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue实现简单可扩展甘特图的方法详解

    Vue实现简单可扩展甘特图的方法详解

    Ganttastic是一个小型的Vue.js组件,用于在Web应用程序上呈现一个可配置的、可拖动的甘特图。本文就将用它来实现简单可扩展的甘特图,感兴趣的可以尝试一下
    2022-11-11
  • Vue路由的模块自动化与统一加载实现

    Vue路由的模块自动化与统一加载实现

    这篇文章主要介绍了Vue路由的模块自动化与统一加载实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论