今天打算把一个表格做成自定义组件,结果发现了一个大坑!!貌似官方文档上并没有对这里进行说明,所以希望能帮到遇到同样问题的同学。本人小白,技术能力不是很强,望说错的地方大神多多指点~
下面进入正题
-------------------------------------<华丽的分割线>----------------------------------------------
首先明确,我们在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]}}
|
那这时候我想把class="table"的那一段打成组件。所以,坑开始了。
按照正常的流程,各种数据传递,引用之类的全部操作完毕,组件wxml为:
< view class = "table" > < view class = "tr" > < block wx:key = "testList-th" wx:for = "{{goodDetail[attributeBoList]}}" > < view class = "th" > {{item[attributeModel][displayName]}}
|
页面wxml为:
< nstable goodDetail = "{{goodDetail}}" attributeBoList = "attributeBoList" attributeModel = "attributeModel" displayName = "displayName" attributeValueModelList = "attributeValueModelList" attributeVal = "attributeVal" tableTip = "{{tableTip}}" >
|
结果我每次加载表格,都会报错: 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]}}
|
ok~~~~一切正常!所以这个坑给大家提个醒,希望能帮助大家解决这种问题,好了老板要过来查岗了,溜了溜了...
如果怀疑有 bug 的话,麻烦给一个代码片段,我们查一下。代码片段的用法:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
目前这样做也是可以的:
this.data.test = '123';
this.setData({
test: this.data.test
});
是的,这个报错和自定义组件本身是什么内容没有关系,只和页面对自定义组件的使用有关系。
你好。并不是不能在block里面引用自定义组件。
对于你的问题,我可以大致推断出原因。目前,如果不通过 setData,直接修改 block 的 wx:if 或 wx:for 条件,就有可能引发这个问题。如在你的小程序里,
this.data.goodDetail[attributeBoList] = xxx
如果有这样的赋值,并且这个值参与 wx:if 或 wx:for 运算的话,就有可能会有这个问题。解决方法是,应当使用 setData 去设置,而不是直接在 this.data 上赋值。
这个帖子回复比较多,我刚刚也遇到了,刚好来回复一下
我的遇到的情况是
<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
3.18更新一下
我试出了一个骚操作,如果和我一样用了全局,但是还想用wx:if的同学,可以这样
<
view
wx:if={{_isLoad && show}}>
<
custom-comp
/>
</
view
>
多了一个_isLoad的条件,而这个条件只要加载page的data里,然后在page的onLoad事件里
this.setData(
{
_isLoad : true
}
)
这样就可以在渲染的时候,不能直接因为show是异步的就报错,因为前面已经不通过了
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>
就会报
而且是延迟几秒后才会报错
蛋疼
我也遇到过这个问题,最后通过注释大法发现是某个setData语句把data的一个属性值设置成了undefined,而这个属性值又是传递给一个组件的property,就报这个错了
复现 反正大家不要在block里用自定义组件就没问题
大致解决了,我是完全标准的调用this.setData也会出现这个问题。
后来通过,wx.nextTick来控制隐藏显示就解决了
解决了吗,我也遇到了这种情况;自定义组件 快速点击切换显示隐藏组件的时候,开发工具和手机都可能会报这个错误
我发现wx:if 和hidden放在一起使用似乎也是会引起这个问题
所以...我并没有直接修改this.data,具体原因等复现了再看看