reactjs Uncaught TypeError：无法读取未定义的属性'map'

Question

I have used getInitialState on my BrowseWidgetBox component. Although when passing the data to my MainMenu component, the data remains empty, as if the AJAX call to the api was never run in the BrowseWidgetBox .

My question then, is why is this happening? Shouldn't componentDidMount call the ajax api and re-set the state to include the contents of the ajax call? I want the state of my groupsData and my itemData to be present when the page is initially loaded. I am a bit worried that getInitialState is hindering the calls to ajax at least 'initially' which is causing my error.

Here is the full code of the two components:

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

You're trying to use the map in object...

In

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

the first render are getting a object in groupsData try change to

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')
                );