前端Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array 报错解决方案

原创已于 2025-04-09 16:39:18 修改 · 2.1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #js #react.js

于 2025-04-09 16:37:51 首次发布

vue问题集合专栏收录该内容

32 篇文章

订阅专栏

5. 使用可选链操作符(?.)和空值合并(??)

总结：

偶遇线上问题，控制台报错：

TypeError: Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

本来是没有报错的，但是后面加了个判断直接提交了。。。（提交前还是要验证下的）

如图所示，这是我的代码，原来是没有if判断的

这个错误的根本原因是尝试对不可迭代或非对象的值进行解构

什么是"存在及可迭代"？

1.存在：

在 JavaScript 中，"存在"指的是变量或属性不是 null 或 undefined：
// 不存在的例子
let a;          // undefined
let b = null;   // null
let c = {};     // 对象存在，但可能属性不存在

// 存在的例子
let d = 0;      // 存在（虽然是 falsy 值）
let e = "";     // 存在（虽然是 falsy 值）
let f = [];     // 存在（空数组）
2.可迭代：

可迭代对象是指实现了 [Symbol.iterator] 方法的对象，可以被 for...of 循环遍历或用于解构赋值：

可迭代对象包括：

数组 Array ([1, 2, 3])

字符串 String ("hello")

Map 和 Set

类数组对象（如 arguments、NodeList）

实现了迭代器协议的自定义对象

不可迭代对象包括：

普通对象 {}（除非特别实现了迭代器）

null 和 undefined

数字、布尔值等基本类型

当你使用数组解构 [] 时，右侧必须是可迭代的对象
// 正确 - 数组是可迭代的
const [a, b] = [1, 2]; 

// 错误 - 对象默认不可迭代
const [x, y] = {};     // 报错：非可迭代实例

// 错误 - null 不可迭代
const [m, n] = null;   // 报错：非可迭代实例

没有加判断前是this.date是一定有值的，但是加了判断，如isResType为假时，对date进行了解构，解构的目标不存在，所以报错了。

想要解决的话，只要加个或者||，搞个数据兜底就可以了，this.date| | [ ]。

难顶，这么简单的问题都出现了，希望大家细心一点呐

let [ startDate,endDate ] = this.date||[]

一般来说像调后台接口拿数据的时候我都会自觉的写上默认值，但是这里的话，就没有注意了，定位问题的话，可以在你的代码提交记录上看起，改了哪些，哪个时候报错，从改的代码开始看起。

下面是一些举例及解决方案：

希望大家避免报错

1. 确保解构的目标存在且是可迭代的

// 错误示例
const [first, second] = null; // 或 undefined

// 正确做法 - 提供默认值
const [first, second] = someArray || [];

2. 对象解构时确保对象存在

// 错误示例
const { name, age } = null; // 或 undefined

// 正确做法
const { name, age } = someObject || {};

3. 处理API响应数据时

// 错误示例
const { data: { user } } = await getInfo(); // 如果data为null会报错

// 正确做法
const { data: { user } = {} } = await getInfo();

// 又或者
let user;
try {
  const result = await getInfo();
  user = result?.data?.user;
} catch (error) {
  user = undefined; // 或其他默认值
}

4. React组件中处理props

// 错误示例
function Component({ props: { name, age } }) {
  // 如果props未传入会报错
}

// 正确做法
function Component({ props: { name, age } = {} }) {
  // 现在有默认值了
}

5. 使用可选链操作符(?.)和空值合并(??)

// 更安全的解构方式
const [firstItem] = someArray?.length ? someArray : [defaultValue];
const { name } = someObject ?? {};

总结：

解决方法主要是：

提供默认值

确保数据已正确加载

使用可选链和空值合并操作符

添加类型检查

-----到底啦----