一、uniapp报错TypeError: Invalid attempt to destructure non-iterable instance.
在uniapp的APP开发中，我在项目的List组件下引入了card组件，并用循环遍历List，之前的检测一直没有问题，但是后来发在多次进行List的更新后（查询操作后），控制台偶尔会报错TypeError: Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method。
我同样在网络上找了好多解决方法，大多在说是因为v-for的组件或对象中存在空值，要检查rowsItem的属性。对比后端返回的数据，我的问题似乎不在这里。
我用debugger模式又检查了编译后页面上都丢失掉了那些东西，我的问题是部分card会丢失整个title插槽和default插槽中部分内容。但不是所有的list-item都会丢失。只有中间的部分。这个时候我发现一个地方：
<!-- uni-list v-for 开头-->
<view v-for="(record,index) in rechargedata.rows" :key="record.id">我这里用的是record.id做v-for的key,record包含的数据还是蛮多的，进而我想到会不会是错过了，当前的id对应的东西还没有找到，就去了下一个。反正已经改了好久了，试一下呗。
<!-- uni-list v-for 开头-->
<view v-for="(record,index) in rechargedata.rows" :key="index">我把 :key="record.id"改成 :key="index",用v-for自动赋予的索引值做key。很神奇，测试后一切正常了。虽然问题解决了，但具体原因我现在也没搞清楚。希望有大佬可以帮忙解惑。难道真的是key的问题？后面的把前面的覆盖了，然后前面的还没渲染完？？
TypeError: Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method
这个问题，我的解决方式是把v-for中的key改成index不要用item中的属性做key.
二、数据响应缓慢的问题
在修改上一个个bug时，我发现某些事件上发生后，数据的渲染和更新响应比较慢，经过我不断检查，发现是因为绑定在list-item上的事件我传递了整个record，看下面actionsEdit(record)方法。
<!-- uni-list v-for 开头-->
<view v-for="(record,index) in rechargedata.rows" :key="record.id">
<!-- uni-list-item 中的一个事件 -->
<view class="card-actions-item" hover-class="card-actions-hover"
@click="actionsEdit(record)">我在actionsEdit方法中只使用了Id一个属性，但整个record包含的数据还是蛮多的。毕竟移动端不是PC，没那么强的算力，于是我就在想会不会是因为传递的数据太多了，导致渲染变慢的原因。于是我将record改为仅传递record.id。测试后，确实在执行和渲染速度上都快了很多。文章来源：https://www.toymoban.com/news/detail-622478.html
除此之外，页面和页面，组件中绑定的事件需要的参数，对于参数尽可能的要什么给什么，这个在App端真的很影响渲染速度，如果真的需要List集合中某一个子属性的全部，传list的Key吧，然后再用list[index]的对象去取。文章来源地址https://www.toymoban.com/news/detail-622478.html
到了这里，关于APP开发，List中使用v-for,但uniapp报错TypeError: Invalid attempt to destructure non-iterable instance.的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
