Возвращение массива итерация

Question

У меня есть следующий компонент, где я тянуть в некоторых JSON, и я пытаюсь получить некоторую вложенную информацию с { this.state.data.items[0]}, однако я получаю ошибку: Uncaught TypeError: Cannot read property '0' of undefined, хотя {this.state.data} и {this.state.data.items} работает хорошо

Вот полный код:

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

Answer 1

Ваш getInitialState должно выглядеть как этот

getInitialState: function() { 
    return { 
     data: { 
      items: [] 
     } 
    }; 
}, 

потому render вызовы перед componentDidMount., Вы пытаетесь получить свойство items от state.data, но это свойство не существует

this.state.data  // => returns empty Array 

тогда вы пытаетесь получить свойство items

this.state.data.items // => returns undefined 

, потому что data не обладает свойством items.,

тогда вы пытаетесь получить первый элемент из itemsArray но предыдущее заявление возвращено undefined, и именно поэтому вы получаете Error, потому что вы не можете получить свойства из undefined значения

Answer 2

рендеринга функция не может получить data.item от начальной state.you нужно менять:

this.state.data.map(function(d){ return d.items[0] });