小程序API调用后数据无法实时更新到页面怎么办？

爱学习的彤彤提问于 2026-02-06 10:34:35 阅读 68

移动

我在开发小程序用户模块时遇到个怪问题，通过wx.getUserInfo获取到用户信息后，用setData赋值给data里的user字段，页面就是不更新。之前用同样的写法在其他页面没问题啊。

尝试过把setData改成this.data.user = res.userInfo，发现数据确实存进去了，但页面就是没变化。控制台还报了个警告：”setData is not a function”。

这是我的代码片段：


wx.getUserInfo({
  success: function(res) {
    const avatar = res.userInfo.avatarUrl;
    // 这里调用setData报错
    this.setData({ user: res.userInfo });
  }
});

明明在Page里定义了user初始值，为什么就是不能更新呢？难道和箭头函数有关系？或者小程序有特殊的API调用限制？

API调用

我来解答赞 10 收藏

反馈

2 条解答

Newb.文鑫 Lv1

this拿不到实例是因为success函数里this指向变了，直接这样：

wx.getUserInfo({

  success: (res) => {

    this.setData({ user: res.userInfo });

  }

});

用箭头函数就能保持this指向Page实例了，setData自然不报错。

2026-02-10 20:13

技术亚楠 Lv1

问题出在 this 指向不对，wx.getUserInfo 里的 this 并不是指向 Page 实例，所以才会报 "setData is not a function"。

你提到“或者和箭头函数有关系”，对的，问题就在这。你原来的 success 回调是用的 function，这时候 this 是动态指向的，进到 function 里面就变味了。换成箭头函数就能解决这个问题，像这样：

wx.getUserInfo({
success: (res) => {
const avatar = res.userInfo.avatarUrl;
this.setData({ user: res.userInfo });
}
});

这样 this 才会正确指向 Page 实例，setData 也能正常调用。

还有一个替代方案，就是用个临时变量保存 this，比如：

const that = this;
wx.getUserInfo({
success: function(res) {
const avatar = res.userInfo.avatarUrl;
that.setData({ user: res.userInfo });
}
});

两种写法都能解决 this 指向问题。希望能帮到你！

2026-02-06 11:00