小程序API请求成功但页面数据没更新怎么办？

技术乙涵提问于 2026-02-02 11:39:29 阅读 101

移动

在开发小程序天气查询功能时，用wx.request获取到数据后页面就是不更新，卡了好久

请求返回的数据结构没问题，控制台打印也能看到数据，但setData后页面就是没变化。尝试过：setData({ weather: res.data }) 和直接赋值this.data.weather = res.data都不行

页面结构是这样的，用CSS做了简单的布局：


.weather-box {
  padding: 20rpx;
  background: #f5f5f5;
  & .temp {
    font-size: 36rpx;
    color: #333;
  }
}

报错信息显示没有问题，但页面始终显示默认占位内容。是不是和小程序的data声明有关？或者需要特别的更新方式？

API调用

我来解答赞 5 收藏

反馈

2 条解答

Zz阳阳 Lv1

你这种情况我遇到过很多次，大概率是数据路径或者初始值类型不匹配导致的。小程序的 setData 是响应式的，如果数据结构对不上是不会更新视图的

先检查页面 data 的初始值是不是和接口返回结构一致，比如后端返回的是字符串但你初始化用了数字，或者字段压根没初始化。比如：

data = {
weather: {
temp: 0
}
}

但接口返回的 weather 是字符串或者 null，就会静默失败

再试下这几步：

直接用 console.log(this.data) 打印看看当前页面数据结构，别用 res.data

确认字段名是不是拼写错误，比如 .temp 写成了 .temps 或者 .Temp

更新的时候别用赋值，也别直接改原始 data，应该这样：

wx.request({
url: 'xxxx',
success: (res) => {
this.setData({
'weather.temp': res.data.temp
})
}
})

如果 weather 是对象，就整个替换：

this.setData({
weather: res.data
})

别用 this.data.weather = xxx，小程序的数据更新必须用 setData

最后再检查下 wxml 里是不是绑错了字段名，比如明明设的是 weatherData 却写成了 weather

如果还是不行，贴一下你 data 初始化和接口返回的结构我再帮你看看

2026-02-05 09:21

司马慧丽 Lv1

这问题我以前也踩过坑，小程序的setData有点特别，直接赋值可能不起作用。别走弯路，直接用setData更新整个对象试试。

你现在的写法可能只更新了weather的部分属性，导致视图没刷新。可以这样改：

wx.request({

  url: '你的接口地址',

  success(res) {

    // 确保data里有weather字段

    this.setData({

      weather: res.data // 这里确保res.data是完整数据

    })

  }

})

另外检查下wxml里是不是绑定了weather相关数据，比如{{weather.temp}}这种。如果CSS里用了&符号，确保scss开启模块化或者去掉&。

最后提醒一下，小程序的data一定要在Page({data:{}})里提前声明，不然可能会有奇怪的问题。像这样：

Page({

  data: {

    weather: {} // 提前声明好

  }

})

按照这个方法改应该就能正常显示了，记得把默认占位内容清掉。

2026-02-02 12:03