uni-app 小程序修改父页面数据,渲染正常,但js取值仍为旧数据?

A页面跳转到B页面,B页面需要需要更新A页面的Data中的值。
我的小程序是从微信小程序转成uniApp的,A页面展示照片,到B页面拍照完成拍照后将A页面照片更新,并在A页面调用接口提交到后台。现象:B页面拍照后回A页面,A页面照片显示已经更新了,看调试后台发现data中的值也更新了。调用接口时也报成功,结果发现A页面图片没有更新到数据库,重新进入A页面时照片还是旧的。经排查发现,上传图片前打印出的图片路径还是旧的路径。
问题代码

var prevPage = pages[pages.length - 2]
prevPage.setData({
  tempFilePaths: imgPath,
 });

经网上查找问题后修改为以下代码,解决问题

    var prevPage = pages[pages.length - 2]
    prevPage.$vm.tempFilePaths = imgPath;

$vm使用说明

https://uniapp.dcloud.net.cn/api/window/window.html#vm

大部分人都知道小程序需要调 setData才会修改变量触发更新页面,直接this.data.selected = true,这样是不会更新UI的。这次反向问题,我还是没搞清楚到底为何会这样,这明显不是页面还没渲染完$nextTick()就去取值造成的,有知道原理的大神希望能给我指点迷津。

写完这个让我想到了以前代码review时同事说不要取UI状态作为判断条件,说UI不靠谱,应该是数据驱动页面,也就是需要用数据判断,比如我们在编程时可能为了少声明一个变量,会直接用按钮是否选中作为判断条件。例如

var btn = new Button()
if(判断逻辑) {
    btn.seleced = true 
}
if(btn.isSelect) { // 执行按钮选中时的一些操作,这样就存在上面提到的bug
}
var btn = new Button()
var isBtnSelected = false
// 例如接口响应后经过判断改变按钮的选中状态
isBtnSelected = 判断条件
btn.seleced = isBtnSelected 

以前不能理解,也按leader说的做了,虽然感觉说的对,但是心想通过UI状态做判断条件应该也没啥问题。本次经历让我有了深刻的认识,还有一些编程人员又菜又犟,告诉他的坑他不信邪非得自己踩一遍。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • uni-app的基本使用 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 un...
    千山鸟语阅读 601评论 0 1
  • 如果你平时用Vue写H5项目比较多,然后突然有一天公司要你用uni-app来同时开发H5和小程序(甚至App),而...
    前端王睿阅读 2,949评论 0 24
  • 单页面程序 uni-app 约定页面文件遵循 Vue 单文件组件 (SFC) 规范[https://vue-loa...
    Jagtu阅读 15,296评论 0 0
  • easycom组件模式是怎么回事 官方文档:https://uniapp.dcloud.io/collocatio...
    microkof阅读 20,557评论 1 6
  • uni-app跨平台框架官方教程 链接:https://ke.qq.com/course/343370 一、框架简...
    Neyo_凉阅读 36,393评论 0 43