小程序从接口中获取的数据,无法显示在组件上
场景:在home页面有个 catalog 的组件,这个组件调用的接口从 Network 中可以查看到数据:
但是在组件中却不显示,下面是 catalog 的子组件。
通过 properties 的属性 catalog 接收数据。
<view class="catalog" hover-class="hover-catalog" hover-stop-propagation="false">
<scroll-view
class="catalog-scroll"
scroll-x="true"
scroll-left="0"
scroll-with-animation="true"
bindscroll="">
<view class="title-box" bindTap="bindCatalog">{{catalog}}</view>
</scroll-view>
</view>
catalog.js
Component({
/**
* 组件的属性列表
*/
properties: {
catalog:{
type: String,
value: '全部'
},
active:{
type: Boolean
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
父组件给子组件传值:
import {ClassCatalogModel} from '../../models/classCatalog.js';
let catalog = new ClassCatalogModel();
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
catalog.getCatalog((res)=>{
//不打印数据,但是从浏览器的 Preview 中可以看到数据
console.log(res.result);
this.setData({
catalogData:res.result
})
})
}
});
home 页使用子组件 catalog
<b-catalog catalog="{{catalogData}}" />
在调试面板的 AppData 中也无法看到任何的数据,不清楚哪里出问题了,求指点。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这种问题,你应该再向上一层打印
log
或debugger
, 逐步缩小出现问题的范围。catalog.getCatalog
内部会返回一个promise
. 那么有没有正确的return
到数据,你按这个思路去调试。问题是调试出来了,问题出在传递数据的过程中
你好你是如何处理的呢?应该是组件加载了,这是数据还为空,后访问的接口;执行顺序问题