uniapp中onShow比onLoad先渲染数据

        最近,遇到一个问题,onLoad里面的异步函数没有调用完,也就是数据还没有返回来,onShow里面的异步函数就已经返回数据,并且渲染出来了,如果onLoad和onShow是同样的异步函数,那么就会导致数据无法及时的更新。

        开发中的场景 开发中支付成功跳转到支付完成界面,点击支付完成界面的返回订单,跳转到全部订单界面。 此过程中支付成功状态界面非我们制作,是别的项目组的,所以无法在此界面调用获取支付状态接口,只能在全部订单界面调用。

        假设:A页面是订单页面,B页面是别人的支付完成界面,A页面中的

        onLoad函数调用getPayState()支付状态函数和getData()获取订单列表数据函数

        onShow中都有getData()获取订单列表数据函数

        操作:点击B支付完成界面的返回订单按钮–》跳转到A全部订单界面

        预想结果:执行onLoad中的两个函数,渲染数据,完成支付订单的渲染以及状态的变更。

        出现的问题onLoad开始执行getPayState()函数,此时没等到这个函数执行完毕,onShow里面的getData()函数开始执行,执行完毕渲染数据,此时页面显示所有的订单数据,但是!但是!因为getPayState()函数没有执行完毕,所以返回的支付订单数据中,新支付的那个订单支付状态是错误的!!!

        解决措施1:因为onShow执行了getData()函数导致渲染的数据错误,所以直接注释掉这里面的函数,也就是onShow不用了。

        再次出现的问题:因为onShow函数不用了,那么进行其他操作再次返回此页面不会再重新渲染数据。比如点击订单的申请退款按钮,提交完成之后,返回全部订单,应该再次调用getData()函数,但是onShow不用了,所以无法请求数据。onLoad不会调用。

         解决措施2针对onShow函数不用了,那么需要在退款的界面返回的时候,调用A页面订单界面的getData()函数,这个我尝试了很多,都不成,以失败告终。

        解决措施3:设置变量show,在onLoad函数中,设置show为false,用于阻止onShow里面函数的调用。例如下面这样:

 onLoad(options) {this.onshow=falsethis.getPayStatus(options.RdSeq)this.getData();
},onShow() {		console.log("onShow")if(this.onshow){console.log("onShow请求订单数据")this.getData();}
},

        此时就可以了,保证onLoad调用的时候,onShow不调用。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注