reactjs 未捕获的类型错误:无法读取未定义的属性“map”

我在BrowseWidgetBox组件上使用了getInitialState。尽管将数据传递给我的MainMenu组件时，数据仍然是空的，就好像对 api 的 AJAX 调用从未在BrowseWidgetBox中运行过一样。

那么我的问题是，为什么会这样？componentDidMount不应该调用 ajax api 并重新设置状态以包含 ajax 调用的内容吗？我希望我的组数据和我的项目数据的状态在最初加载页面时存在。我有点担心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')
                );