[微信小程序开发]数据null导致无法展示,控制台不报错,踩坑

  • • 发表于 8年前
  • • 作者 雪咖啡
  • • 4433 人浏览
  • • 5 条评论
  • • 最后编辑时间 8年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

接上文 [微信小程序开发]动态数据不够用,本地静态数据的使用教程
从小黄象群里拿到的一个商城的微信小程序源码,数据做成静态放到本地,在本地联调测试。
在调试过程过程中遇到一个很奇怪的问题,上代码

<view class="container">
    <block wx:for="{{brandList.brand}}">
        <view class="brand_item">
            <navigator url="../list/index?brand={{item.id}}&typeid={{item.typeid}}">
                <image src="{{item.pic}}" class="pic"></image>
                <view class="right_cont">
                    <image src="{{item.logo}}" class="logo"></image>
                    <text class="name">{{item.chinesename}}</text>
                    <text class="brief">{{item.brief}}</text>
                    <text class="price">¥{{item.minprice}}元/件起</text>
                </view>
            </navigator>
        </view>
    </block>
</view>

代码中 brandList.brand 是个集合,然后遍历,但是界面死活不出效果

我就挨个联调,代码变成下面这样

<view class="container">
    <block wx:for="{{brandList.brand}}">
        <view class="brand_item">
            <text class="name">{{item.chinesename}}</text>
        </view>
    </block>
</view>

还是不出
变成这样

<view class="container">
    <block wx:for="{{brandList.brand}}">
        <view class="brand_item">
            {{item.chinesename}}
        </view>
    </block>
</view>

终于出来了

有一个null值,直接怀疑就是这个null值导致的(我是不是很聪明),翻文档,找到三目运算,改成如下代码

<view class="container">
    <block wx:for="{{brandList.brand}}">
        <view class="brand_item">
            <navigator url="../list/index?brand={{item.id}}&typeid={{item.typeid}}">
                <image src="{{item.pic}}" class="pic"></image>
                <view class="right_cont">
                    <image src="{{item.logo}}" class="logo"></image>
                     <!-- 好坑啊啊 item.chinesename is null -->
                    <text class="name">{{item.chinesename?item.chinesename:'名称缺失'}}</text>
                    <text class="brief">{{item.brief}}</text>
                    <text class="price">¥{{item.minprice}}元/件起</text>
                </view>
            </navigator>
        </view>
    </block>
</view>

运行效果如下

————————————华丽的分割线(我是糗*老友)————————————

总结一下:

  1. 遇到问题先把代码捋一遍,确信不是代码问题(我对我的代码很自信,一般不捋),然后打log(有时候打log也看不出来)。
  2. 调试数据最好用裸代码,我在
    html<text class="name">{{item.chinesename}}</text>
    这里载了跟头,带着text标签,死活不出效果,去掉text就打印出来了数据内容,感觉好坑。

我踩了这个坑,希望以后遇到同样问题的小伙伴们能想到是这个问题导致的,快速解决。

分享到:
5条评论
Ctrl+Enter
作者

雪咖啡

雪咖啡

APP:1 帖子:3 回复:17 积分:146

已加入社区[3085]天

永不放弃

作者详情》
Top