reactjs Uncaught TypeError: Не удается прочитать свойство 'map' of undefined

Question

Я использовал getInitialState на моем BrowseWidgetBox компоненте. Хотя при передаче данных на мой компонент MainMenu данные остаются пустыми, как если бы вызов AJAX для api никогда не запускался в BrowseWidgetBox.

Мой вопрос тогда, почему это происходит? Должно ли componentDidMount вызвать ajax api и повторно установить состояние для включения содержимого вызова ajax? Я хочу, чтобы состояние моих группData и myDataData присутствовало при начальной загрузке страницы. Я немного обеспокоен тем, что getInitialState препятствует вызовам ajax, по крайней мере, «изначально», что вызывает мою ошибку.

Вот полный код из двух компонентов:

var MainMenu = React.createClass({ 
       render: function() { 
        console.log(this.props.groupsData); // console.log here 
        var categories = this.props.groupsData.objects.map(function(obj){ 
         return (<li>obj.description</li>); 
        }); 
        return (<div className="MainMenu"> 
          <ul>{categories}</ul> 

         </div>); 
       } 
      }); 

var BrowseWidgetBox = React.createClass({ 
       getInitialState: function() { 
         return {groupsData: {}, itemsData: {}}; 
       }, 
       getGroupsApi: function(){ 
        $.ajax({ 
         url: this.props.groupsApi, 
         dataType: 'json', 
         type: 'GET', 
         success: function(groupsData){ 
          this.setState({groupsData: groupsData}); 
          console.log(groupsData)  // Console.log here 
         }.bind(this), 
         error: function(xhr, status, err){ 
          console.error(this.props.groupsApi ,status, err.toString()); 
         }.bind(this) 
        }); 

       }, 
       getItemsApi: function() { 
       $.ajax({ 
         url: this.props.itemsApi, 
         dataType: 'json', 
         type: 'GET', 
         success: function(itemsData){ 
          this.setState({itemsData: itemsData}); 
         }.bind(this), 
         error: function(xhr, status, err){ 
          console.error(this.props.groupsApi ,status, err.toString()); 
         }.bind(this) 
        }); 
       }, 
       componentDidMount: function() { 
        this.getGroupsApi(); 
        this.getItemsApi(); 
       }, 
       render: function() { 
        return (<div className="BrowseWidgetBox"> 
           <MainMenu groupsData={this.state.groupsData} itemsData={this.state.itemsData} /> 
           <Display /> 
          </div>); 
       } 
      }); 



       React.render(
        <BrowseWidgetBox groupsApi="http://this/is/a/good/url" itemsApi="http://this/is/a/good/api/call" />, document.getElementById('widget-container') 
       ); 

Answer 1

Вы пытаетесь использовать карту в объекте ...

В

getInitialState: function() { 
     return {groupsData: {}, itemsData: { objects: [] }}; 
}, 

первой визуализацией являются получение объекта в группахData попытаться изменить на

var MainMenu = React.createClass({ 
       render: function() { 
        console.log(this.props.groupsData); // console.log here 
        var categories = this.props.groupsData.objects.map(function(obj){ 
         return (<li>obj.description</li>); 
        }); 
        return (<div className="MainMenu"> 
          <ul>{categories}</ul> 

         </div>); 
       } 
      }); 

var BrowseWidgetBox = React.createClass({ 
       getInitialState: function() { 
         return {groupsData: { objects: [] }, itemsData: []}; 
       }, 
       getGroupsApi: function(){ 
        $.ajax({ 
         url: this.props.groupsApi, 
         dataType: 'json', 
         type: 'GET', 
         success: function(groupsData){ 
          this.setState({groupsData: groupsData}); 
          console.log(groupsData)  // Console.log here 
         }.bind(this), 
         error: function(xhr, status, err){ 
          console.error(this.props.groupsApi ,status, err.toString()); 
         }.bind(this) 
        }); 

       }, 
       getItemsApi: function() { 
       $.ajax({ 
         url: this.props.itemsApi, 
         dataType: 'json', 
         type: 'GET', 
         success: function(itemsData){ 
          this.setState({itemsData: itemsData}); 
         }.bind(this), 
         error: function(xhr, status, err){ 
          console.error(this.props.groupsApi ,status, err.toString()); 
         }.bind(this) 
        }); 
       }, 
       componentDidMount: function() { 
        this.getGroupsApi(); 
        this.getItemsApi(); 
       }, 
       render: function() { 
        return (<div className="BrowseWidgetBox"> 
           <MainMenu groupsData={this.state.groupsData} itemsData={this.state.itemsData} /> 
           <Display /> 
          </div>); 
       } 
      }); 



       React.render(
        <BrowseWidgetBox groupsApi="http://this/is/a/good/url" itemsApi="http://this/is/a/good/api/call" />, document.getElementById('widget-container') 
       );