真假猕猴

2021年4月19日

事件：测试领取助力优惠券

期望：当领取优惠卷的时候，自动刷新福利中心的列表

实际：当领取完后，福利中心的列表并没有自动刷新

实现逻辑

1. 在领取弹窗中，当领取完后，通过triggerEvent 反馈一个addsuccess的事件
2. 主页面接收到后，调用首页（子组件）的 获取福利中心列表的方法
3. 方法中，从接口获得数据，并进行setData

一切都是如此美好.....

but，福利中心列表就是没有更新视图

通过console.log 接口返回值，它是新的

that.setData后，console.log that.data 也是新的

甚至直接将整个首页子组件console.log 出来，也是新的

总之，数据是新的，就是没有更新视图

但是假如切换一下页面，然后回到首页，那么又是能更新视图的

网上说要用到setData，要用that.setData，不要用this.setData，setData的数据不能大于1024....

在这里均不存在....

网上还说可以调用子页面的onLoad，或者onReady，进行更新视图

这里用的是组件，不论调用onLoad,onReady,load,ready 均提示没有找到方法no function ....

既然不更新视图，那么来一个wx:if，在获取数据之前先隐藏福利中心列表，获取完后，再显示出来

没有效果....

猜测是不是因为方法是promise，但是没有同步执行导致

继续失败....

问题已经困扰了一上午......

灵感总是在不经意间

addsuccess 事件的处理方法中，刷新福利中心列表的代码段如下

// 重新加载福利中心的显示内容
await this.vipCardIndex.getCouponActivities();

this.vipCardIndex 这个，是在页面onLoad的时候通过selectComponent设置的

this.vipCardIndex = this.selectComponent("#vipCardIndex");

现在看到的这个首页组件，跟onLoad里获取的这个首页组件，会不会不是同一个？

马上尝试下，在重新加载福利中心之前重新获取一下

// 重新使用selectComponent获取一下
this.vipCardIndex = this.selectComponent("#vipCardIndex");
// 重新加载福利中心的显示内容
await this.vipCardIndex.getCouponActivities();

一切都变得通畅，问题解决，

看到的组件和实际刷新的组件，实际不是同一个，所以不论怎么setDate，不论怎么wx:if，也不会有效果

总结

在进行组件引用的时候，最好通过重新selectComponent获取，因为在你使用它之前，也许已经不是你看到的那个。