v-for循环空数组异常渲染排查解决【uniapp,微信小程序,vue】

数组为空或元素为空导致的异常显示

情况概述：接到客户反馈，我们的一个列表出现了异常的空行情况，要求解决，所以我们便一步一步来排错解决，问题很简单，新手可以看，大神掠过
开发框架：uniapp，vue,微信小程序，反正其他的也通用，方法都相同

问题复现

客户最先反馈的是行距异常

通过图片我们可以得知，有几条数据对应的视图出现了异常行，
这里我们大致可以猜测一下，要么是这部分有数据，渲染了，但是因为某些原因，看不见，要么是没有数据，上面的标题多了一个换行符导致了这一步部分多了一行，所以，咱们分为两种情况进行排查,那就先排除一个最简单的，是否存在换行符

异常换行符排查

通过F12或者控制窗口查看视图，我们可以直观的发现问题

我们的猜想是多余的换行符换行了，但是检查结果是没有换行，那就简单说一下假如存在这种处理下的处理方法

.text-container {  width: 200px; /* 指定容器的宽度 */  white-space: nowrap; /* 禁止换行 */  overflow: hidden; /* 隐藏溢出部分 */  text-overflow: ellipsis; /* 在溢出部分显示省略号 */}

<div class="text-container">  需要防止换行并隐藏溢出部分的文本内容</div>

这里咱们进行的是最简单的处理，文本溢出部分隐藏，当然处理方法只适合简单的溢出情况，如果想要显示全部但是又不想换行或者能够换行想要避免像这样的多余换行符导致空白行情况，我稍候会继续补充，注意收藏哦亲

异常渲染情况排查

这个的情况就比较特殊了，有数据没显示，没数据却渲染了，咱们只能挨个儿排除
还是刚才的老办法，控制台调出视图直接看

我们从视图中可以看到，空白部分是有高度的容器，但是又没有任何显示元素，可能是颜色不对劲，也有可能是根本就没元素，于是我们继续深入看一下，展开折叠的元素后我们看到了空元素，到这里，我们刚才的猜想得到验证了

到这里，又出现两个问题了，这个渲染的数据是我们不小心操作出来的呢，还是接口数据就是这样呢（我是中期加入的这个项目，所以对于一些以前的页面和逻辑不是很清楚，所以才会有这样的问题），OK，那咱们再进行排除，先排除是不是接口数据问题

通过控制台的netWork查看请求，

展开元素后我们发现，刚才的猜想又得到了印证，一路绿灯好不啦~

现在知道原因了，接下来就是继续分析造成这一情况的具体原因，在这个地方渲染了五个空的容器，对应接口里面的五个空元素，那我们应该做一下限制，不让他渲染就行了，我们直接看一下源码

通过源码我们得知渲染使用了v-for，并且也做了限制，只是因为item的值是一个长度为5的空数组，所以错把空元素都进行了渲染，所以这样的情况下，就好办了，要么是后端改接口，要么是前端改页面，作为一个钱端仔，怎么能辛苦写后端的老板呢（老板是后端😅）

解决方案（异常渲染）

针对此情况，我们只需要在循环的容器后或者前面稍加一个v-if的判定条件，或者在数据获取时处理，这两种方法都均可，为了方便，咱们尽量不对数据下手，想要对数据下手可以私我一下，我进行补充

v-if判断条件增加

根据刚才的情况，我们直接过滤空数组、非数组、数组存在元素但元素为空的情况，直接在视图中判断条件有点多，我们直接给v-if绑定一个方法即可
这里记得在v-if的方法中传一个参数，参数就是你需要处理的数组

<view v-if="shouldRenderTags(item.tags)"><!-- shouldRenderTags括号中的参数是你需要进行处理的数组参数 -->	<view style="display: inline-block;" v-for="(item1,index1) in item.tags"	:key="index1">		<view :class="[`bg_Cla${index1}`,item1 !=='' ? 'tags':'']" >{{item1}}		</view>	</view></view>

// 进行渲染逻辑的判断shouldRenderTags(tag){	return Array.isArray(tag) && tag.every(item => item !== '');	//Array.isArray()判断该元素是否为数组	//array.every(callback[, thisArg])方法来检查数组中的每个元素是否不等于空字符串，空则返回一个布尔值，false,表示数组中的每个元素是否都满足 item !== '' 的条件。},

检查效果

问题解决，yeah~

结束语

其实到这里，我们的问题只是在已有代码的基础上加了一层判定条件，并没有修改原来的视图的判定方法，所以算是比较鸡贼的，我个人是建议在数据接收的时候处理掉这个问题， 方法一样。只不过我这个是因为牵连页面太多，动的太多其他页面就容易出问题，算是比较鸡贼吧,有问题大家可以及时提出来，我们互相交流，多谢点赞🧡🧡🧡支持！！！
爱你们😀