Вопрос: Как ждать ответа AJAX и только после этого сделать компонент?


У меня проблема с одним из моих компонентов React. Я думаю, что AJAX не загружает весь контент с внешнего сервера, прежде чем React отобразит ChildComp компонент.

Obj tree

Выше вы можете увидеть дерево ответа, которое приходит с сервера. И это код моего компонента:

var ChildComp = React.createClass({
  getInitialState: function(){
    return {
      response: [{}]
    }
  },
  componentWillReceiveProps: function(nextProps){
    var self = this;

    $.ajax({
      type: 'GET',
      url: '/subscription',
      data: {
        subscriptionId: nextProps.subscriptionId //1
      },
      success: function(data){
        self.setState({
          response: data
        });
        console.log(data);
      }
    });
  },
  render: function(){
      var listSubscriptions = this.state.response.map(function(index){
        return (
          index.id
        )
      });
      return (
        <div>
          {listSubscriptions}
        </div>
      ) 
  }
});

Это работает отлично, но если я изменю свое возвращение:

  return (
     index.id + " " + index.order.id
  )

id не определен. И все остальные свойства объекта заказа. Почему так? Если я console.log мой ответ после success функция дает все данные (как на картинке). Я предполагаю, что только первые объекты загружаются, когда React отображает компонент, и после этого загружаются все остальные внутренние объекты. Я не могу сказать, если это так (звучит так странно), и я не могу сказать, как это решить.

Я тоже попробовал что-то вроде этого

  success: function(data){
    self.setState({
      response: data
    }, function(){
      self.forceUpdate();
    })
  }.bind(this)

но повторное рендеринг происходит до моего console.log(data) запускается. Как ждать ответа AJAX и только после этого сделать компонент?


33


источник


Ответы:


Вот ваш код, переработанный с некоторыми комментариями измененных частей

  getInitialState: function(){
    return {
      // [{}] is weird, either use undefined (or [] but undefined is better).
      // If you use [], you loose the information of a "pending" request, as 
      // you won't be able to make a distinction between a pending request, 
      // and a response that returns an empty array
      response: undefined
    }
  },

  loadSubscriptionData: function(subscriptionId){
    var self = this;

    // You probably want to redo the ajax request only when the 
    // subscriptionId has changed (I guess?)
    var subscriptionIdHasChanged = 
       (this.props.subscriptionId !== subscriptionId)

    if ( subscriptionIdHasChanged ) {
        // Not required, but can be useful if you want to provide the user
        // immediate feedback and erase the existing content before 
        // the new response has been loaded
        this.setState({response: undefined});

        $.ajax({
          type: 'GET',
          url: '/subscription',
          data: {
            subscriptionId: subscriptionId //1
          },
          success: function(data){

            // Prevent concurrency issues if subscriptionId changes often: 
            // you are only interested in the results of the last ajax    
            // request that was made.
            if ( self.props.subscriptionId === subscriptionId ) {
                self.setState({
                  response: data
                });
            }
          }
        });
     }
  },

  // You want to load subscriptions not only when the component update but also when it gets mounted. 
  componentDidMount: function(){
    this.loadSubscriptionData(this.props.subscriptionId);
  },
  componentWillReceiveProps: function(nextProps){
    this.loadSubscriptionData(nextProps.subscriptionId);
  },

  render: function(){

      // Handle case where the response is not here yet
      if ( !this.state.response ) {
         // Note that you can return false it you want nothing to be put in the dom
         // This is also your chance to render a spinner or something...
         return <div>The responsive it not here yet!</div>
      }

      // Gives you the opportunity to handle the case where the ajax request
      // completed but the result array is empty
      if ( this.state.response.length === 0 ) {
          return <div>No result found for this subscription</div>;
      } 


      // Normal case         
      var listSubscriptions = this.state.response.map(function(index){
        return (
          index.id
        )
      });
      return (
        <div>
          {listSubscriptions}
        </div>
      ) 
  }

28



Прежде всего, вы хотели бы поместить вызов AJAX внутри componentWillMount() или componentDidMount() (если вам нужно сделать некоторые манипуляции с DOM).

componentWillReceiveProps() является

Вызывается, когда компонент получает новые реквизиты. Этот метод не вызывается для начальной визуализации ,

https://facebook.github.io/react/docs/component-specs.html

Но даже если вы поместите вызов AJAX внутри componentWillMount() или componentDidMount(), render() вероятно, будет вызван с пустым ответом до завершения вызова AJAX.

Таким образом, порядок вызова будет таким (я предположил, что вы поместили вызов AJAX внутри componentWillMount():

componentWillMount() (Инициируется вызов AJAX) -> componentDidMount() -> render() (рендеринг с пустым ответом; index.order.id приведет к ошибке) -> Возврат и вызовы AJAX this.setState() -> (некоторые другие методы жизненного цикла компонента, такие как shouldComponentUpdate() называется; см. ссылку FB выше для подробностей) -> render() называется снова.

Таким образом, решение вашей проблемы:

1) Перемещение вызова AJAX для componentWillMount() или componentDidMount()

2) Либо установите начальное состояние на [] (в отличие от [{}]) или проверьте, index пуст в

var listSubscriptions = this.state.response.map(function(index){
  return (
    index.id
  )
});

3



Я бросил его в JSBin, и я не могу воспроизвести вашу проблему.

http://jsbin.com/jefufe/edit?js,output

Каждый раз, когда нажимается кнопка, она отправляет новые реквизиты <ChildComp/>, который затем запускает componentWillReceiveProps, отправляет (фальшивый) запрос ajax, получает (поддельный) ответ, устанавливает состояние ответа на (фальшивый) ответ и повторно отображает компонент с отображенными правильными данными.

Единственное, что я добавил, это проверка index.id == null прежде чем пытаться получить к нему доступ, но я не думаю, что это что-то для решения проблемы, с которой вы сталкиваетесь, index.order.id,

Единственная причина, по которой я могу придумать, почему вы не можете получить доступ index.order.id потому что, возможно, у вас есть код, который вы не показываете нам, который в какой-то момент меняет ответ.

Кроме того, помните, что компоненты React всегда будут повторно отображаться при изменении состояния или реквизита, если вы не определили поведение в shouldComponentUpdateчто говорит иначе. Это означает, что, когда вы получаете весь объект с сервера и устанавливаете его в состояние в своем компоненте, он будет повторно отображать и показывать вам обновленное состояние. Для React нет причины / способа «мелко визуализировать» ваш объект ответа, как вы предлагали в своем оригинальном посте.

Я не уверен, помогает ли этот ответ, но, надеюсь, вы можете посмотреть JSBin, который я предоставил, и найти то, что вы, возможно, упустили.


0



Как ждать ответа AJAX и только после этого сделать компонент? | Programmerz.ru