constructor
(){
super
();
this
.
state
=
{
data:
null
}
}
fetchData
(){
fetch
(
'src/video_wall_test.json'
)
.
then
((
response
)
=>
{
if
(
response
.
status
===
200
){
response
.
json
().
then
((
respData
)
=>
{
console
.
log
(
respData
);
this
.
setState
({
data:respData
,
});
})
}
})
.
catch
((
error
)
=>
{
console
.
log
(
error
);
})
}
render
(){
if
(
!
this
.
state
.
data
){
return
(
<
div
>
NO DATA
</
div
>
)
}
return
(
<
GridViewTVWall
data
=
{
this
.
state
.
data
}
/>
);
}
注意:1.fetch方法是异步的
2.在constructor中将数据data设置为null,在render中进行判断,根据结果进行渲染,否则,第一次没有获取到数据,UI不会重新渲染,页面就会一直有问题
3.组件的生命周期函数componentWillMount和componentDidMount只会执行一次