Reactjs组件的异步呈现 [英] Reactjs async rendering of components

问题描述

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

未捕获错误：不变违规：CategoriesSetup.render（）：必须返回有效的ReactComponent。您可能已经返回了undefined，数组或其他一些无效对象。

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

解决方案

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

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> ; 
   } 
    
   返回< div>正在加载...< / div> ;; 
   }，
    
    renderRow：function（row）{ 
    return< OptionRow obj = {row} /> ;; 
   } 
   }）; 
     

I want to render my component after my ajax request is done.

Below you can see my code

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>)

        })

    }
});

But i get the error below because i am returning render inside the done method of my ajax request.

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

Is there a way to wait for my ajax request to end before start rendering?

解决方案

There are two ways to handle this, and which you choose depends on which component should own the data and the loading state.

1. Move the Ajax request into the parent and conditionally render the component:

   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. Keep the Ajax request in the component and render something else conditionally while it's loading:

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

这篇关于Reactjs组件的异步呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！