घटकों के async रेंडरिंग को अभिक्रिया करता है

Question 1

मैं अपने 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 अनुरोध के किए गए तरीके के अंदर रेंडर कर रहा हूं।

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 अनुरोध के लिए प्रतीक्षा शुरू करने से पहले समाप्त करने के लिए है?

Question 2

इसे संभालने के दो तरीके हैं, और जो आप चुनते हैं वह इस बात पर निर्भर करता है कि किस घटक के पास डेटा और लोडिंग स्थिति होनी चाहिए।

माता-पिता में अजाक्स अनुरोध को स्थानांतरित करें और घटक को सशर्त रूप से प्रस्तुत करें:

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

घटक में अजाक्स अनुरोध रखें और इसे लोड करते समय सशर्त रूप से कुछ और प्रस्तुत करें:

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

Question 3

घटकों के async प्रतिपादन का मूल उदाहरण नीचे दिया गया है:

import React                from 'react';
import ReactDOM             from 'react-dom';        
import PropTypes            from 'prop-types';

export default class YourComponent extends React.PureComponent {
    constructor(props){
        super(props);
        this.state = {
            data: null
        }       
    }

    componentDidMount(){
        const data = {
                optPost: 'userToStat01',
                message: 'We make a research of fetch'
            };
        const endpoint = 'http://example.com/api/phpGetPost.php';       
        const setState = this.setState.bind(this);      
        fetch(endpoint, {
            method: 'POST',
            body: JSON.stringify(data)
        })
        .then((resp) => resp.json())
        .then(function(response) {
            setState({data: response.message});
        });
    }

    render(){
        return (<div>
            {this.state.data === null ? 
                <div>Loading</div>
            :
                <div>{this.state.data}</div>
            }
        </div>);
    }
}