百度小程序wx.request返回数据后页面不更新怎么办？

UI思佳提问于 2026-02-13 16:36:25 阅读 20

移动

今天在做天气查询功能时遇到个怪问题，用wx.request成功获取到天气数据了，但就是没法显示在页面上。

代码是这样写的：


Page({
  data: {
    weather: ''
  },
  onLoad() {
    wx.request({
      url: 'https://api.example.com/weather',
      success: (res) => {
        console.log(res.data)  // 这里能正常打印数据
        this.setData({
          weather: res.data
        })
      }
    })
  }
})

页面结构很简单：


<view>今天天气：{{weather}}</view>

控制台没报错，但页面就是显示空的。试过直接在onLoad里赋值this.data.weather = '测试'反而能显示，但通过setData就是没反应，是不是百度小程序有特殊限制啊？

我来解答赞 5 收藏

反馈

1 条解答

西门静云 Lv1

这个问题其实是个常见的坑，本质上是 this 的指向问题。你在 wx.request 的 success 回调里用了箭头函数，这会导致 this 指向的不是 Page 实例，而是外层作用域。

更好的写法是直接把回调函数改成普通函数，这样 this 就会正确指向 Page 实例了。改完之后代码大概长这样：

Page({
data: {
weather: ''
},
onLoad() {
wx.request({
url: 'https://api.example.com/weather',
success: function(res) {
console.log(res.data)
this.setData({
weather: res.data
})
}.bind(this) // 这里也可以用 bind 强制绑定 this
})
}
})

或者你要是喜欢用箭头函数的话，可以这么写：

Page({
data: {
weather: ''
},
onLoad() {
const that = this // 先保存一下 this
wx.request({
url: 'https://api.example.com/weather',
success: (res) => {
console.log(res.data)
that.setData({ // 这里用保存的 that
weather: res.data
})
}
})
}
})

这两种写法都能解决问题，看你个人喜好了。不过说真的，这种 this 指向的问题确实挺烦人的，我之前也被坑过好几次，后来就养成习惯，涉及异步回调的时候都会特别注意 this 的指向。

还有一点要注意，确保你的接口返回的数据格式是正确的，比如应该是个字符串或者能被正确转成字符串的对象，不然即使 setData 成功了页面也可能渲染不出来。

2026-02-14 14:05