Подтвердить что ты не робот

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 до начала рендеринга?

4b9b3361

ОТВЕТЫ

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