Как не получать undefined в react.js?

Question

[Миша Коган]

Здравствуйте, суть проблемы в том что загружаю json с сервера через ajax, и провожу разбор через react для рендеринга, и при первом запуске всегда получаю undefined, а потом уже получаю данные как должны быть. Как исправить проблему?

Код:

var Game = React.createClass({
	getInitialState: function() {
    	return {data: []};
 	},
 	loadCommentsFromServer: function() {
	    $.ajax({
	      url: this.props.url,
	      dataType: 'json',
	      cache: false,
	      success: function(data) {
	      	console.log(data[0]._id);
	        this.setState({data: data[0]});
	      }.bind(this),
	      error: function(xhr, status, err) {
	        console.error(this.props.url, status, err.toString());
	      }.bind(this)
	    });
  	},
	componentDidMount: function() {
	    this.loadCommentsFromServer();
	    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
	},
	render: function() {
		return (
			<div className="gameBox">
			<h1> Game id: {this.props._id}</h1>
			<Bet data={this.state.data} />
			</div>
		);
	}
});

//Comment list = bet
var Bet = React.createClass({
	render: function() {
                  // при первом выводе через консоль тут получаю undefined, после уже получаю объект 
		console.log(this.props.data.bets)
		var items = this.props.data.bets.map(function(item) {
			return (
				<Item name={item.name}/>
			);
		});
		return (
			<div className="bet">
				{items}
			</div>
		);

	}
});
//Comment = item
var Item = React.createClass({
	render: function() {
		return (
			<div className="item">
				<p> id: {this.props.id} </p> <br/>
				<p> lowestPrice: {this.props.lowestPrice} </p> <br/>
				<p> type: {this.props.type}</p> <br/>
				<p> icon_url: {this.props.icon_url} </p> <br/>
				<p> name: {this.props.name} </p> <br/>
				<hr/>
			</div>
		);
	}
});


React.render(
	<Game url="game"  pollInterval={2000} />,
	document.getElementById('main')
);

Answer 1

[Dmitry Pavlov]

А что выводится в консоль при console.log(this.props.data) в первый и последующие разы?

Comments

[Миша Коган]

В первый раз пустой массив( [] ), потом Object. Я так понял, что проблема в том, что этот блок кода выполняется раньше чем ajax запрос. А вот как это исправить пока не понял.

[Виталий Инчин ☢]

Миша Коган: сунуть этот блок кода в обработчик успешного получения ответа.

[Миша Коган]

Виталий Инчин: а как-то более изящно нельзя решить ?

Answer 2

[Владимир Гамула]

Все верно, первый раз ваш компонент Game грузится без данных, так как в начальном состоянии data - пустой массив, а вы пытаетесь взять свойство bets в компоненте Bet.
После первого рендеринга срабатывает событие componentDidMount и данные загружаются -> состояние меняется.

Если я все правильно понял, вы должны изменить свойство data в методе getInitialState, чтобы это был объект, а не массив и добавить проверку при передаче данных в компонент Bet:

{this.state.data.bets && <Bet data={this.state.data} />}