美文网首页我爱编程
双向绑定中的内容“+”拼接导致NAN问题

双向绑定中的内容“+”拼接导致NAN问题

作者: 舒小妮儿 | 来源:发表于2018-04-16 16:40 被阅读42次

今天发现个问题，刚进入页面时显示工作地址为NAN，数据加载请求结束并渲染显示完成后是正常的。其中地址address是由请求到的对象jobInfo的prov_name、city_name、addres拼接起来的。

下面为代码部分：

<view class="white-bgView"  style="margin-bottom: {{(jobInfo.enroll_list.length == 0 && !jobInfo.phone) ? '134rpx' :  '0'}};">
  <view class="title">
    <image class="icon" src="/image/dress@3x.png"></image>
    <view>工作地址</view>
  </view>
  <view class="line"></view>
  <view class='map' catchtap='toMap'>
    <view class="address"> 
     {{jobInfo.prov_name+jobInfo.city_name+jobInfo.address}}
    </view>
    <image class='arrow-right' src='/image/arrow.png'></image>
  </view>
</view>

我做了以下尝试：

<!-- 1、不作拼接，{{}}只绑定prov_name -->
<view class="address">
  {{jobInfo.prov_name}}
</view>

<!-- 2、不作拼接，{{}}分别绑定prov_name、city_name、address -->
<view class="address">
  {{jobInfo.prov_name}}{{jobInfo.city_name}}{{jobInfo.address}}
</view>

刚进页面时并不会显示NAN。

猜想应该是“+”拼接导致的问题，回到官方文档检查，运算符 中有说到加法运算（+）也可以用作字符串的拼接。从这一点来看的话，我在绑定内容中用+拼接字符串做显示应该没问题。那出现NAN是为什么呢？

NAN： Not A Number的简称，意思如单词描述一样，不是一个数值。
我给 class=“address” 的元素绑定内容，确实也不是数值运算，只是做简单的字符串拼接，也没问题呀，那为什么还会显示NAN呢？

搞不懂，还是会官方文档看数据绑定 的介绍。

算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

字符串运算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})

从例子中发现，绑定内容如果需要使用“+”运算符，要么发挥算数运算功能，要么做字符拼接。而从下面代码看

<view class="address"> 
  {{jobInfo.prov_name+jobInfo.city_name+jobInfo.address}}
</view>

我在使用时从理解层面也是没有差错的，那究竟错在哪？

我的猜测和理解是：jobInfo.prov_name jobInfo.city_name jobInfo.address 数据未被请求时，jobInfo对象是不存在的。而jobInfo的这些属性类型也是不确定的，此时做“+”时，不会被当成字符串拼接作用在使用，而作为加法运算符的话，prov_name不是数字，所以才报NAN。

当然解决这个问题的方法有很多种，如：

1、wxml分别绑定拼接

<view class="address"> 
  {{jobInfo.prov_name}}{{jobInfo.city_name}}{{jobInfo.address}}
</view>

2、js处理数据后直接给wxml绑定使用

// 设置一个变量localAddress直接在请求数据后
this.setData({
  localAddress: jobInfo.prov_name+jobInfo.city_name+jobInfo.address
})

// 然后wxml中class=“address”的元素绑定内容为localAddress
<view class="address"> 
  {{localAddress}}
</view>

3、wx:if 懒加载

<view wx:if="{{jobInfo.prov_name && jobInfo.city_name && jobInfo.address}}" class="white-bgView" style="margin-bottom: {{(jobInfo.enroll_list.length == 0 && !jobInfo.phone) ? '134rpx' :  '0'}};">
  <view class="title">
    <image class="icon" src="/image/dress@3x.png"></image>
    <view>工作地址</view>
  </view>
  <view class="line"></view>
  <view class='map' catchtap='toMap'>
    <view class="address"> 
     {{jobInfo.prov_name+jobInfo.city_name+jobInfo.address}}
    </view>
    <image class='arrow-right' src='/image/arrow.png'></image>
  </view>
</view>

第三种方案其实是隐藏了这个问题，wx:if是延迟加载的，在渲染条件为真时，才会真正渲染，网络请求结束后jobInfo对象存在，作为要显示地址的几个属性存在且为字符串，此时“+”做拼接是肯定不会报错。

这个虽然看似逻辑毫无问题却让自己懵逼的问题，让我再次感受了：发现问题 --> 分析&解决问题 这个过程，思考、学习和积累的重要性。

总结：
1、“+”：加法运算 & 字符拼接
2、{{}} 中使用 “+” 做算数运算需保证拼接内容为数字，做字符拼接需保证拼接内容为字符串

相关文章