Reactjs асинхронный рендеринг компонентов

Я хочу сделать свой компонент после выполнения моего запроса 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 до начала рендеринга?

Ответы

Ответ 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>;
  }
});

  • Сохраняйте запрос 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} />;
  }
});