React-Rails: загрузить начальное состояние массива с помощью ajax

Question

Я слежу за некоторыми учебниками с помощью React, и я начинаю создавать приложение самостоятельно. Я столкнулся с ситуацией, касающейся компонентов, и мне интересно, подходит ли эта практика для этого сценария. Обратите внимание: я просто использую рельсы; нет потока или что-то еще.

установки начального состояния с массивом, значения которого приготовьтесь через AJAX и есть, что отображение массива в начальной визуализация

Вот что я пытаюсь сделать: (урезанный для простоты)

var ShoutList = React.createClass({ 
    getInitialState: function(){ 
     return {shouts: []}; 
    }, 
    componentDidMount: function(){ 
     var component = this; 
     $.get('/api/shouts.json', function(data){ 
      component.setState({shouts: data}); 
     }); 
    }, 
    render: function(){ 
     return (
      <div> 
      {this.state.shouts[0].shout} 
      </div>);    
    } 
}); 

так что, если у меня есть это право, порядок, в котором вещи выполняются в следующей последовательности:

1. при загрузке getInitialState устанавливает выкрики в пустой массив
2. Render получает вызовы и ошибки из-за попытки доступа к свойству крика на пустой массив
3. ComponentDidMount вызывается и устанавливает состояние криков на данные, полученные от вызова ajax. ** Я получаю сообщение об ошибке при попытке сделать это в ComponentWillMount **
4. Render снова вызван, потому что состояние изменилось, но на этот раз крики [0] .shout будут содержать данные.

Так что ошибка на шаге 2, и моя работа вокруг выглядит следующим образом:

var ShoutList = React.createClass({ 
    getInitialState: function(){ 
     return {shouts: []}; 
    }, 
    componentDidMount: function(){ 
     var component = this; 
     $.get('/api/shouts.json', function(data){ 
      component.setState({shouts: data}); 
     }); 
    }, 
    emptyShouts: function(){ 
     return(<div>No Shouts Yet!</div>); 
    }, 
    shoutsList: function(){ 
     return(<div>{this.state.shouts[0].shout}</div>); 
    }, 
    render: function(){ 
     if(this.state.shouts.length > 0){ 
      return this.shoutsList(); 
     }else { 
      return this.emptyShouts(); 
     } 
    } 
}); 

Это работает точно так же, как мне это нужно, но есть лучший способ установки значения начального состояния в массиве с ajax и с загрузкой в ​​первоначальном рендеринге без необходимости делать это, если инструкция?

Спасибо!

Answer 1

Без использования Flux я бы сказал, что ваша реализация - один из немногих способов обойти эту проблему. Другой способ будет иметь логику, прежде чем вернуть render «ы:

... 
render: function() { 
    var renderedShout; 
    if (typeof this.state.shouts[0] === "undefined") { 
    renderedShout = <div>No Shouts Yet!</div>; 
    } else { 
    renderedShout = <div>{this.state.shouts[0].shout}</div>; 
    } 

    return renderedShout; 
} 

Преимущество делать это таким образом, что вы будете иметь только один возврат, которые могли бы сделать его более понятным для читателя в долгосрочной перспективе.

Answer 2

Если вы хотите, вы можете попробовать это изменение в вашей предварительном редактировании коды:

var ShoutList = React.createClass({ 
    getInitialState: function(){ 
     return {shouts: []}; 
    }, 
    componentDidMount: function(){ 
     var component = this; 
     $.get('/api/shouts.json', function(data){ 
      component.setState({shouts: data}); 
     }.bind(this), 'json'); 
    }, 
    render: function(){ 
     return (
      <div> 
      {this.state.shouts[0].shout} 
      </div>);    
    } 
}); 

bind вашего $.get вызов компонента делает вызов. Это должно работать как и ожидалось оттуда.