MorJS页面跳转后数据未更新，如何解决？

小凡敬提问于 2026-02-09 22:22:50 阅读 10

移动

我在用MorJS开发小程序时遇到个奇怪的问题。页面跳转到详情页后，虽然接口返回了新数据，但页面还是显示旧数据。比如点击商品列表里的不同商品，详情页标题和价格都没变。

我按文档在详情页的onReady生命周期里调用了获取数据的方法，代码是这样的：


Page({
  data: {
    product: {}
  },
  async onReady() {
    const productId = Mor.Navigator.getQuery().id;
    this.setData({ product: await fetchProduct(productId) });
  }
});

跳转时用了Mor.Navigator.navigate方法传参，但发现每次跳转后getQuery拿到的id是对的，但页面就是不更新。试过在onReady里加了this.refresh()，也没用。

控制台没报错，但数据明显还是第一次请求的结果。难道MorJS的页面复用机制导致数据没重新加载？

移动端框架

我来解答赞 5 收藏

反馈

2 条解答

程序员朝阳 Lv1

我一般直接把数据请求放在onShow里而不是onReady，因为MorJS页面会复用，onReady只执行一次。你改成这样就行：

Page({

  data: {

    product: {}

  },

  async onShow() {

    const productId = Mor.Navigator.getQuery().id;

    this.setData({ product: await fetchProduct(productId) });

  }

});

2026-02-10 16:10

司空树珂 Lv1

这问题我之前踩过坑，不是MorJS的bug，是生命周期用错了。onReady只在页面首次加载时执行一次，你从列表页第二次跳转过来的时候，页面实例已经存在了，不会重新触发onReady。

你应该把数据请求逻辑移到onShow里去。onShow每次页面显示都会执行，不管是首次进入还是从其他页面返回。

改成这样就行：

Page({

  data: {

    product: {}

  },

  async onShow() {

    const productId = Mor.Navigator.getQuery().id;

    if (!productId) return;

    

    // 加个loading避免视觉错乱

    this.setData({ loading: true });

    const product = await fetchProduct(productId);

    this.setData({ product, loading: false });

  }

});

另外注意一点，Mor.Navigator传参后，getQuery拿到的参数是挂在全局路由上的，如果你不手动清空，下次跳转可能还会带上之前的参数。不过看你现在id是对的，这块暂时没问题。

核心就是把onReady换成onShow，页面数据就会实时更新了。这种框架的页面复用机制确实容易坑人，尤其是从Vue那种完全重建的思维转过来的时候。

2026-02-09 23:07