ReactJS async, дождитесь результатов

Я новичок в ReactJS и пытаюсь понять это. Теперь у меня есть ситуация, когда я загружаю информацию, необходимую для рендеринга. Но поскольку он асинхронен, компонент отображается перед передачей информации.

var info;

function getInfo() {
    //this will come from backend REST with Backbone which takes a bit
}

var InfoPage = React.createClass({
    render: function() {        
        getInfo()

        return (
            <div>info: {info}</div>            
        );
    }
});

Теперь div не покажет информационное значение, поскольку оно еще не установлено в рендеринге. Итак, как я могу заставить рендер ждать информации? Или как это должно быть разрешено?

Фактический React.renderComponent вызывается с верхнего уровня и запускает все подкомпоненты, поэтому я думаю, что не могу заставить новый рендер (и не должен?).

Ответы

Ответ 1

ComponentDidMount Метод жизненного цикла

В соответствии с документами ComponentDidMount - это компонентный крючок, который вы должны использовать для выполнения вашего запроса ajax:

http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

ComponentDidMount

Вызывается сразу после выполнения рендеринга... Если вы хотите интегрироваться с другими фреймворками JavaScript, установите таймеры с помощью setTimeout или setInterval или отправьте запросы AJAX, выполните эти операции в этом методе.

Пример

Используя ваш пример, код может выглядеть так:

var InfoPage = React.createClass({
  getInitialState: function () {
    return { info: {} };
  },

  componentDidMount: function () {
    $.ajax({
      url: '/info.json',
      dataType: 'json',
      success: function(data) {
        this.setState({info: data});
      }.bind(this)
    });
  },

  render: function() {        
    return (
      <div>info: {this.state.info}</div>            
    );
  }
});

getInitialState

Выше мы используем метод getInitialState для возврата пустого объекта info. Это позволяет отображать наш компонент, пока мы ждем возврата сервера с данными.

После выполнения ComponentDidMount он будет использовать this.setState для замены пустых info и данных сервера и ref render компонента.

Дальнейшее чтение

Этот подход можно использовать в разделе Состояние обновления Реагировать.

Ответ 2

Вам нужно сделать что-то вроде:

var InfoPage = React.createClass({
  getInitialState: function() {
     return {info: "loading ... "};
  },
  componentDidMount: function() {
     this.getInfo();
  },
  render: function() {        
    return (
        <div>info: {this.state.info}</div>            
    );
  },
  getInfo:function(){
     $.ajax({ url:"restapi/getInfo/whatever", .... }).success(function(res){
        this.setState({info:res});
     }.bind(this));
  }
});

Ответ 3

Экмаскрипт 6 позволяет использовать синтаксис async/wait. Объявление асинхронной функции определяет асинхронную функцию. Здесь больше: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

И пример:

const makeRequest = async () => {
            await funcPromise1(test1);
            await funcPromise22(test2);
        };
makeRequest();