收藏
评论

自定义组件发生Expect END descriptor...的坑!


今天打算把一个表格做成自定义组件,结果发现了一个大坑!!貌似官方文档上并没有对这里进行说明,所以希望能帮到遇到同样问题的同学。本人小白,技术能力不是很强,望说错的地方大神多多指点~


下面进入正题

-------------------------------------<华丽的分割线>----------------------------------------------


首先明确,我们在wxml中作条件判断的时候常用的是标签,所以循环表格组件的时候,我们是这样做的:

<block wx:if="{{goodDetail[attributeBoList].length > 0}}">
 <view class="table">
   <view class="tr">
     <block wx:key="testList-th" wx:for="{{goodDetail[attributeBoList]}}">
       <view class="th">{{item[attributeModel][displayName]}}view>
     block>
   view>
   <block wx:key="testList-tr" wx:for="{{goodDetail[attributeBoList][0][attributeValueModelList]}}" wx:for-index="index">
     <view class="tr">
       <block wx:key="testList-td" wx:for="{{goodDetail[attributeBoList]}}" wx:for-index="idx">
         <view class="td">{{item[attributeValueModelList][index][attributeVal]}}view>
       block>
     view>
   block>
 view>
 block>
<block wx:else>
 <text>此套餐还没有详细信息哦~text>
block>

那这时候我想把class="table"的那一段打成组件。所以,坑开始了。

按照正常的流程,各种数据传递,引用之类的全部操作完毕,组件wxml为:

<view class="table">
 <view class="tr">
   <block wx:key="testList-th" wx:for="{{goodDetail[attributeBoList]}}">
     <view class="th">
       {{item[attributeModel][displayName]}}
     view>
   block>
 view>
 <block wx:key="testList-tr" wx:for="{{goodDetail[attributeBoList][0][attributeValueModelList]}}" wx:for-index="index">
   <view class="tr">
     <block wx:key="testList-td" wx:for="{{goodDetail[attributeBoList]}}" wx:for-index="idx">
       <view class="td">
         {{item[attributeValueModelList][index][attributeVal]}}
       view>
     block>
   view>
 block>
view>

页面wxml为:

<block wx:if="{{goodDetail[attributeBoList].length > 0}}">

 

 <nstable goodDetail="{{goodDetail}}" attributeBoList="attributeBoList" attributeModel="attributeModel" displayName="displayName" attributeValueModelList="attributeValueModelList" attributeVal="attributeVal" tableTip="{{tableTip}}">nstable>
block>
<block wx:else>
 <text>此套餐还没有详细信息哦~text>
block>

结果我每次加载表格,都会报错: Expect END descriptor with depth 0 but get another


经过一次次排查,发现竟然是不能直接在block标签内引用自定义组件!


所以当我把block标签一起打入组件之后:

<block wx:if="{{goodDetail[attributeBoList].length > 0}}">
 <view class="table">
   <view class="tr">
     <block wx:key="testList-th" wx:for="{{goodDetail[attributeBoList]}}">
       <view class="th">
         {{item[attributeModel][displayName]}}
       view>
     block>
   view>
   <block wx:key="testList-tr" wx:for="{{goodDetail[attributeBoList][0][attributeValueModelList]}}" wx:for-index="index">
     <view class="tr">
       <block wx:key="testList-td" wx:for="{{goodDetail[attributeBoList]}}" wx:for-index="idx">
         <view class="td">
           {{item[attributeValueModelList][index][attributeVal]}}
         view>
       block>
     view>
   block>
 view>
block>
<block wx:else>
 <text>{{tableTip}}text>
block>

ok~~~~一切正常!所以这个坑给大家提个醒,希望能帮助大家解决这种问题,好了老板要过来查岗了,溜了溜了...

最后一次编辑于  2018-04-04
收藏

12 个评论

  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-04-04

    如果怀疑有 bug 的话,麻烦给一个代码片段,我们查一下。代码片段的用法:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2018-04-04
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-04-04

    目前这样做也是可以的:


    this.data.test = '123';
    this.setData({
     test: this.data.test
    });


    尝试过自定义组件没有任何数据的情况下,在block中引用也是报正文描述的错


    是的,这个报错和自定义组件本身是什么内容没有关系,只和页面对自定义组件的使用有关系。

    2018-04-04
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-04-04

    你好。并不是不能在block里面引用自定义组件。


    对于你的问题,我可以大致推断出原因。目前,如果不通过 setData,直接修改 block 的 wx:if 或 wx:for 条件,就有可能引发这个问题。如在你的小程序里,


    this.data.goodDetail[attributeBoList] = xxx


    如果有这样的赋值,并且这个值参与 wx:if 或 wx:for 运算的话,就有可能会有这个问题。解决方法是,应当使用 setData 去设置,而不是直接在 this.data 上赋值。

    2018-04-04
    赞同
    回复
  • 陈式坚
    陈式坚
    2019-03-18

    这个帖子回复比较多,我刚刚也遇到了,刚好来回复一下

    我的遇到的情况是

    <block wx:if="{{show}}">
     
        <custom-comp/>
     
    </block>

    会报错,真机没啥事情

    然后删除  <custom-comp/>的确就不会了。


    本来以为就这么简单,后来发现原来复杂的很多


    最终的解决是变成

    <view hidden="{{show}}">
     
        <custom-comp/>
     
    </view>


    把block改成view(因为block不支持hidden),通过hidden代替wx:if


    为什么这样可以?

    首先,wx:if会对show这个字段进行校验而hidden不会,所以可以解决报错的问题


    但真实的情况就是官方说的,问题出在show这个字段上,如果这个字段不是通过setData修改那就会出错。


    所以,记住在视图层显示的字段一定要用setData。这样就可以安安心心用回block+wx:if



    -----  题外话


    比较惨的是,如果你和我一样用了数据全局管理,那只能乖乖用hidden,因为全局数据管理不可避免的肯定要用异步处理data数据,或者修改全局数据时没有用到setData





    2019-03-18
    赞同 1
    回复 2
    • 陈式坚
      陈式坚
      2019-03-18

      3.18更新一下

      我试出了一个骚操作,如果和我一样用了全局,但是还想用wx:if的同学,可以这样

      <view wx:if={{_isLoad && show}}>
          <custom-comp/>
      </view>


      多了一个_isLoad的条件,而这个条件只要加载page的data里,然后在page的onLoad事件里

      this.setData(

      {

      _isLoad : true

      }

      )


      这样就可以在渲染的时候,不能直接因为show是异步的就报错,因为前面已经不通过了

      2019-03-18
      1
      回复
    • 陈式坚
      陈式坚
      2019-03-18回复陈式坚

      3.18更新

      上面的方法遇到一个很蛋疼的事情,那就又遇到一个bug,那就是如果

      你的block里有自定义组件,并且这个自定义组件有wx:for,且wx:for里有其他自定义组件的话,那还会报错,只不过这次只有一行


      代码类似于


      index.wxml

      <block wx:if="{{show}}">

          <custom-comp/>

      </block>


      custom-comp.wxml

      <view>

          <view wx:for="{{5}}">

              <custom-comp-secondly/>

         </view>

      </view>


      就会报


      而且是延迟几秒后才会报错

      蛋疼




      2019-03-18
      回复
  • 阿水
    阿水
    03-09

    我也遇到过这个问题,最后通过注释大法发现是某个setData语句把data的一个属性值设置成了undefined,而这个属性值又是传递给一个组件的property,就报这个错了

    03-09
    赞同
    回复
  • 柏超
    柏超
    2019-01-08

    复现 反正大家不要在block里用自定义组件就没问题

    2019-01-08
    赞同
    回复
  • Genuifx
    Genuifx
    2018-10-09

    大致解决了,我是完全标准的调用this.setData也会出现这个问题。

    后来通过,wx.nextTick来控制隐藏显示就解决了

    2018-10-09
    赞同
    回复
  • woods
    woods
    2018-09-11

    解决了吗,我也遇到了这种情况;自定义组件 快速点击切换显示隐藏组件的时候,开发工具和手机都可能会报这个错误

    2018-09-11
    赞同
    回复
  •  
     
    2018-04-12

    我发现wx:if 和hidden放在一起使用似乎也是会引起这个问题

    2018-04-12
    赞同
    回复 1
    • 我想换昵称
      我想换昵称
      2018-05-22
      我发现也是啊 wx:if和hidden同时使用的话就会出现这个问题,把hidden换成wx:if就好了,不会出现这个问题了
      2018-05-22
      回复
  • 璋卿
    璋卿
    2018-04-04

    所以...我并没有直接修改this.data,具体原因等复现了再看看


    2018-04-04
    赞同
    回复

正在加载...

登录 后发表内容