javascript - Reactjs组件的异步渲染

Question

我想在 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 请求的 did 方法中返回渲染。

未捕获错误:不变违规:CategoriesSetup.render():必须返回有效的 ReactComponent。您可能返回了未定义的数组或其他无效对象。

有没有办法在开始渲染之前等待我的ajax请求结束？

Answer 1

有两种方法可以处理此问题，您选择哪种方法取决于哪个组件应拥有数据和加载状态。

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} />;
     }
   });