react - 报错Unhandled Rejection (TypeError): Invalid attempt to spread non-iterable instance（详细解决教程）

已于 2024-09-12 16:58:16 修改
阅读量2.7k 收藏 3
点赞数 3
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) 文章标签： react react报错详细解决方案 Invalid attempt to spread non-i erable instance react前端框架出现错误 前端如何解决浏览器控制台报错
于 2024-03-20 10:43:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/136868997
版权
前端组件与功能(开箱即用) 同时被 2 个专栏收录
354 篇文章 2394 订阅 ¥9.90 ¥99.00
订阅专栏
前端常见问题解决
133 篇文章 157 订阅 ¥9.90 ¥99.00
订阅专栏
在React项目开发中遇到浏览器控制台显示'Unhandled Rejection (TypeError): Invalid attempt to spread non-iterable instance'的错误。此博客详细介绍了问题原因及其解决方案，特别是当使用antdesign的Upload组件时。问题的关键在于错误地赋值了非迭代对象。正确做法是将e.fileList赋值回去，从而避免此类错误。遵循此教程，可以有效解决react+antdesign中upload组件报错的问题。
摘要由CSDN通过智能技术生成

问题介绍

在前端react项目开发中，浏览器控制台错误提示：Unhandled Rejection (TypeError): Invalid attempt to spread non-iterable instance，很奇怪的错误，本博客提供详细解决方法。

如果我们的报错差不多，就可以完美解决这个问题。

在这里插入图片描述

解决教程

其实，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
Vue3 - 详解报错 Uncaught TypeError: Cannot read properties of undefined (reading ‘writeText‘)，vuejs剪贴板出错
王佳斌
07-10 3482
剪贴板报错，navigator.clipboard，writeText，突然就报错了，浏览器禁用了非安全域的navigator.clipboard对象，解决报错，Cannot read properties of undefined (reading 'writeText')，复制，粘贴，vue3，vue2，nuxt2，nuxt3，react，javascript，typescript，报错，document，复制后报错，用户粘贴报错，出错，浏览器控制台报错，详细教程，解决不了，还是不行，部署到线上环境就报
react-admin：react-admin系统解决方案：react后台管理系统解决方案
02-03
react-admin系统解决方案 文档地址： 问题和方案汇总： 更新日志迁移至 :beaming_face_with_smiling_eyes: （重要！对于了解项目部分功能和代码很有用！） cli安装和使用react-admin :fire: 使用快速安装和下载...
Invalid attempt to spread non-iterable instance.In order to be iterable, n
weixin_46118439的博客
03-01 7687
为了可迭代，非数组对象必须具有[Symbol.iiterator]（）方法。出现这个报错的时候一般都是在对象前面使用了扩展运算符。如果只是想将对象里面的值赋给数组可以使用for in。要是还有别的方法欢迎大佬来留言。传播不可迭代实例的尝试无效。
解决Vue出现“TypeError: res.data.rows is not iterable (cannot read property undefined)“问题
最新发布
m0_73522372的博客
09-21 400
通常表明在你的代码中，你试图迭代一个未定义或不存在的属性。对象中，但可能在某些情况下。没有被正确赋值或根本不存在。
Invalid attempt to spread non-iterable instance错误
Red_sevenWord的博客
06-08 1万+
Invalid attempt to spread non-iterable instance 运算符报错
[解决报错] Invalid attempt to spread non-iterable instance.In order to be iterable, non-array objects mu
JAMBO808的博客
04-03 3万+
nonIterableSpread.js?9448:2 Uncaught (in promise) TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method. 有道翻译:TypeError:无效的尝试传播不可迭代的实例。 为了成为可迭代对象，非数组对象必须有一个[Sym..
uncaught at _callee TypeError: Invalid attempt to spread non-iterable instance
ThisEqualThis的博客
05-08 4672
报错内容如下： 错误信息的意思是：未在_callee类型错误捕获:传播非迭代实例的尝试无效 出现当前问题的原因：数据格式解析错误，可能在应该使用 {} 的时候使用了 [] ，在应该使用 [] 的时候使用了 {}。 index.js:1 uncaught at _callee TypeError: Invalid attempt to spread non-iterable instance ...
TypeError: Invalid attempt to spread non-iterable instance.In order to be iterable, non-array objec
weixin_43350305的博客
09-27 1万+
错误提示： 我在引用公共组件时传入的data数据是不是数组的类型，如null,undefined,或对象的类型，但是在公共组件使用了扩展运算符去处理这个data，所以报错了， 解法一：传如公共组件需要的类型 解法二：公共组件判断，如果传入的不是需要的类型，就把它转为空数组/对象，如转为空数组： export function TestArrError(arr) { if (!(arr instanceof Array)) { arr = undefined; } r..
错误：Invalid attempt to spread non-iterable instance
xiaoyuer_2020的博客
06-05 9640
这种错误一般是延展运算符使用出了错误，例如在一个对象前面用了延展运算符。 let select = { id: 1 } //因为select是一个对象，所以会出错。 newSelectionArray = [...select, newSelection]; ...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法
12-09
当你遇到“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”这样的错误，通常是因为在同一个模块中混用了CommonJS（`require`和`module.exports`）和ES6模块（`import`...
npx create-react-app xxx创建项目报错的解决办法
11-21
手头有一台大学时代的Windows电脑，它此前没有装过create-react-app，只装了node环境。版本信息：node -> 10.16.3，npm -> 6.9.0。前几日闲的无事想给它装个React，结果失败了，报了错，所以有了下面这出。 安装过程...
react-native-smooth-pull-to-refresh:自定义拉动以刷新React Native的组件
05-02
安装安装套件$ npm install --save react-native-smooth-pull-to-refresh# or$ yarn add react-native-smooth-pull-to-refresh示范项目基本用法import { PullToRefreshView } from "react-native-smooth-pull-to-...
react-native-quick-base64:一个用于React Native的快速base64模块
05-10
react-native-quick-base64 用于React Native的C ++中Base64的本地实现。 比iPhone 11 Pro上的快4倍。 尝试在下进行基准测试。 安装 npm install react-native-quick-base64 用法 import { btoa , atob } from '...
TypeError: Invalid attempt to spread non-iterable instance.
qq_41287158的博客
06-24 3954
这种错误一般是延展运算符使用出了错误，例如在一个对象前面用了延展运算符。 let obj = {} //因为obj 是一个对象，所以就会报上图的错误。 let arr = [...obj,{name:'1'}]
微信小程序Invalid attempt to spread non-iterable instance解决办法
weixin_48826751的博客
04-22 3685
微信小程序Invalid attempt to spread non-iterable instance解决办法 原因：在js中给列表元素赋初值空，并且从缓存中取值赋给该列表元素，如： data:{ daily:[] }, 同时存在另一个数据，每次进入该页面这个数据的取值都不同，想要将每次的这个数据值存入daily并设置到缓存中（假如该数据变量为C） this.setData{ daily:C //错误，这样设置回覆盖掉之前daily的值 daily:[...this.data.daily,...
报错Invalid attempt to spread non-iterable instance
热门推荐
Oralinge
10-15 6万+
此类报错多为扩展运算符报错。 合并路由时候报错： 检查发现： 对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中 从上面这句话可知，该报错是由于不可遍历导致的。所以我把代码改为…prrjectB.rutes后成功运行。 ...
bug: TypeError: Invalid attempt to spread non-iterable instance
奶绿走糖的博客
08-27 1879
报错信息： 分析：此类报错多为扩展运算符报错。 问题代码： 解决方式：
Invalid attempt to spread non-iterable instance
weixin_42069147的博客
09-23 1312
类型错误：传播不可提交实例的尝试无效 根据网上说法： 1、此类错误多为不可遍历导致的，这遍历附近排查 2、这一类错误大概率是你的扩展运算符附近出了错，在这附近排查 经排查：我的问题出在扩展运算符附近 ...
TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objec
qq1722377628的博客
03-30 5万+
看一下百度翻译： 类型错误：传播不可提交实例的尝试无效。 为了可iterable，非数组对象必须有一个[Symbol.iterator]（）方法。 网上查询到的说法是：此类错误多为不可遍历导致的。 来看一下我的代码： <List dataSource={{}} //就是这一行出了问题 ...
Uncaught TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
05-25
这个错误通常出现在你试图使用展开运算符（spread operator）来展开一个非可迭代对象（non-iterable object）时。可迭代对象是指实现了`[Symbol.iterator]`方法的对象。 例如，在下面的代码中，尝试展开一个数字是会出现这个错误的： ``` const num = 123; const arr = [...num]; // Uncaught TypeError: Invalid attempt to spread non-iterable instance ``` 而如果你想要展开数字，可以将其转换为可迭代对象，例如字符串： ``` const num = 123; const arr = [...String(num)]; // ['1', '2', '3'] ``` 如果你能提供出错的代码，我可以更具体地给出解决方案。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值