微信小程序wx.request请求回来的数据没有及时显示到页面上

最新推荐文章于 2024-02-14 12:57:07 发布

SakuraLJ

最新推荐文章于 2024-02-14 12:57:07 发布

阅读量2.4w

点赞数 7

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/SakuraLLj/article/details/54235118

微信同时被 2 个专栏收录

8 篇文章

订阅专栏

小程序

3 篇文章

订阅专栏

本文介绍了一个常见的微信小程序开发陷阱：直接修改this.data而非使用setData来更新数据。通过一个具体的示例，展示了如何正确地更新页面数据，并解释了setData函数的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出问题的场景

//出问题的代码
Page({
  data: {
    swiper: {//顶部轮播
      indicatorDots:true,
      autoplay:true,
      interval:5000,
      duration:1000,
      imgUrls:[
          "http://preview.quanjing.com/top014/top-663618.jpg",
          "http://preview.quanjing.com/top019/top-747622.jpg"
      ]
    },
    matchsFirst:[//通栏上面的赛事     这部分数据是要显示在页面上的

    ],
    matchsSecond:[//通栏的赛事 这部分数据是要显示在页面上的

    ],
    matchsLast:[//通栏下面的赛事 这部分数据是要显示在页面上的

    ]
  }
  ....省略不相干代码
  );
  onLoad: function () {
          var that = this;
      wx.request({
        url:app.globalData.url.api.home,
        success: function(res) {
            var matchsFirst = xxx;
            var matchsSecond= xxx;
            var matchsLast= xxx;
            //这样直接赋值并不会把数据渲染到页面上的    不过 0.9版本的时候这样做是可以的   
            that.data.matchsFirst=matchsFirst;
            that.data.matchsSecond=matchsSecond;
            that.data.matchsLast=matchsLast;
        }});
    };

解决办法

//样这种方式赋值   坑了我一个上午   
that.setData({
          matchsFirst:matchsFirst,
          matchsSecond:matchsSecond,
          matchsLast:matchsLast
        });

微信官方原文

Page.prototype.setData()
setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。

注意：

直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。