Reactjs组件的asynchronous渲染

我想在我的ajax请求完成后渲染我的组件。

下面你可以看到我的代码

var CategoriesSetup = React.createClass({ render: function(){ var rows = []; $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) { $.each(data, function(index, element){ rows.push(<OptionRow obj={element} />); }); return (<Input type='select'>{rows}</Input>) }) } }); 

但是我得到了下面的错误，因为我在我的ajax请求的done方法中返回了render。

Uncaught Error: Invariant Violation: CategoriesSetup.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

有没有办法等待我的Ajax请求结束之前开始呈现？

Answer 1

有两种方法来处理这个问题，你select哪一个取决于哪个组件应该拥有数据和加载状态。

1. 将Ajax请求移到父项中并有条件地渲染组件：

    var Parent = React.createClass({ getInitialState: function() { return { data: null }; }, componentDidMount: function() { $.get('http://foobar.io/api/v1/listings/categories/').done(function(data) { this.setState({data: data}); }.bind(this)); }, render: function() { if (this.state.data) { return <CategoriesSetup data={this.state.data} />; } return <div>Loading...</div>; } }); 

2. 在组件中保持Ajax请求，并在加载时有条件地呈现其他东西：

    var CategoriesSetup = React.createClass({ getInitialState: function() { return { data: null }; }, componentDidMount: function() { $.get('http://foobar.io/api/v1/listings/categories/').done(function(data) { this.setState({data: data}); }.bind(this)); }, render: function() { if (this.state.data) { return <Input type="select">{this.state.data.map(this.renderRow)}</Input>; } return <div>Loading...</div>; }, renderRow: function(row) { return <OptionRow obj={row} />; } });