구성 요소의 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>) 

     }) 

    } 
}); 

볼 수 있습니다하지만 난 내 아약스 요청의 수행 방법 내부 렌더링 반환하고 있기 때문에 아래의 오류가 발생합니다.

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

내 아약스 요청이 시작 렌더링하기 전에 끝날 때까지 기다릴 수있는 방법이 있습니까?

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

가