react.js在ajax请求完成之前不会呈现
react.js在ajax请求完成之前不会呈现
提问于 2016-08-01 09:33:31
我有一个非常简单的React.js组件，我需要制作一个isomorphic (在服务器上呈现)。问题是，只有在ajax请求完成后才使用有用的信息呈现组件，如下所示：
export default React.createClass({
getInitialState() {
return {}
},
componentDidMount() {
fetch("/users/").then(response => {
this.setState(users: response.data)
})
},
render() {
if (this.state.users == undefined) {
return <div />
}
return <div>{this.state.users.map(some_function)}</div>
}
})问题是，将空div返回到搜索引擎是毫无意义的。我希望ajax请求能够完成(即使是在服务器上)，并且只在此之后呈现。我怎样才能做到这一点？
回答 1
Stack Overflow用户
发布于 2016-08-01 10:01:03
正如@Dencker所触及的那样，您希望让父组件决定何时呈现子组件，类似于这样的内容将起作用：
// Parent
export default React.createClass({
getInitialState() {
return {
usersLoaded: false
}
},
componentDidMount() {
fetch("/users/").then(response => {
this._users = response.users;
this.setState({
usersLoaded: true
});
})
},
render() {
if ( this.state.usersLoaded ) {
return (
<ChildComponent users={this._users} />
)
} else {
return null;
}
}
});
// Child
export default React.createClass({
render() {
return <div>{this.props.users.map(some_function)}</div>
}
});我在那里做的是：
- 在父组件(即
usersLoaded: false)上设置初始状态。 - 在该组件的呈现函数中，确保仅在父组件的
usersLoaded状态为真时才呈现子组件。 - 父组件的
componentDidMount方法是进行AJAX调用的地方，请注意，我在组件上使用一个变量来存储用户，而不是状态对象(通常应该只使用状态存储非常简单的值)。 - 然后将其作为支柱传递给子组件。
所有这些都使子组件变得简单得多，因为它现在只需要一个呈现方法，而不需要if/else检查。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38695444
复制相关文章
相似问题
腾讯云开发者
