Reect Ajax render 传递数据到子Component 获取不到数据

124 阅读 0 评论 82 点赞

我是靠谱客的博主隐形橘子，这篇文章主要介绍Reect Ajax render 传递数据到子Component 获取不到数据，现在分享给大家，希望可以做个参考。

ajax获取数据一般都写在 componentDidMount 中，而render的调用周期又是在componentDidMount 前面

这导致了ajax还没有进行的时候，render已经完成了，所以在render里面是获取不到ajax的数据的

然后想到了React在更新数据的时候会重新渲染

so 在state中添加了一个状态 loadingData

它看起来是这个样子的

复制代码

1
2
3
4
5
getInitialState: function() {
return {
loadingData: false
}
}

在rander中看起来是这个样子的

复制代码

1
2
3
return (
{ this.state.loadingData ? <Helo /> : "" }
)

在ajx中看起来是这个样子的

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
this.setState({
loadingData: true
});
var lastGist = result[0];
//do something
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
}