关于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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 项目中Axios二次封装实例Demo

    项目中Axios二次封装实例Demo

    vue项目经常会用到axios来请求数据,那么首先肯定需要对这个请求方法进行一个二次封装,这篇文章主要给大家介绍了关于项目中Axios二次封装的相关资料,需要的朋友可以参考下
    2021-06-06
  • 基于VuePress 轻量级静态网站生成器的实现方法

    基于VuePress 轻量级静态网站生成器的实现方法

    VuePress是一个基于Vue的轻量级静态网站生成器以及为编写技术文档而优化的默认主题。这么文章给大家详细介绍了vuepress 静态网站生成器的方法,需要的朋友参考下吧
    2018-04-04
  • 手把手带你安装vue-cli并创建第一个vue-cli应用程序

    手把手带你安装vue-cli并创建第一个vue-cli应用程序

    vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,下面这篇文章主要给大家介绍了关于安装vue-cli并创建第一个vue-cli应用程序的相关资料,需要的朋友可以参考下
    2022-08-08
  • 关于vue.js组件数据流的问题

    关于vue.js组件数据流的问题

    本篇文章主要介绍了关于vue.js组件数据流的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue中onmounted周期里获取不到dom的原因及分析

    vue中onmounted周期里获取不到dom的原因及分析

    这篇文章主要介绍了vue中onmounted周期里获取不到dom的原因及分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3基础组件开发detePicker日期选择组件示例

    vue3基础组件开发detePicker日期选择组件示例

    这篇文章主要为大家介绍了vue3基础组件开发-detePicker(日期选择组件)示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue-cli在 history模式下的配置详解

    vue-cli在 history模式下的配置详解

    这篇文章主要介绍了vue-cli在 history模式下的配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue-cli的webpack模板项目配置文件分析

    vue-cli的webpack模板项目配置文件分析

    本篇文章主要对vue-cli的webpack模板项目配置文件进行分析。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • vue中post请求报400的解决方案

    vue中post请求报400的解决方案

    这篇文章主要介绍了vue中post请求报400的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue3项目中使用tinymce的方法

    vue3项目中使用tinymce的方法

    这篇文章主要介绍了vue3使用tinymce的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04

最新评论