Javascript reactjs Uncaught TypeError:无法读取属性'；地图'；未定义的

我在我的

BrowseWidgetBox

组件上使用了

getInitialState

。尽管将数据传递到my

MainMenu

组件时，数据仍然为空，就好像从未在

BrowseWidgetBox

中运行对api的AJAX调用一样

那么，我的问题是，为什么会发生这种情况？难道不应该

componentDidMount

调用ajax api并重新设置状态以包含ajax调用的内容吗？我希望在最初加载页面时显示我的groupsData和itemData的状态。我有点担心，

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

var main菜单=React.createClass({
render:function（）{
console.log（this.props.groupsData）；//此处为console.log
var categories=this.props.groupsData.objects.map（函数（obj）{
返回（
对象描述
）；
});
返回(
{categories}
);
}
});
var BrowseWidgetBox=React.createClass({
getInitialState:函数（）{
返回{groupsData:{}，itemsData:{}；
},
getGroupsApi:function（）{
$.ajax({
url:this.props.groupsApi，
数据类型：“json”，
键入：“GET”，
成功：功能（组数据）{
this.setState（{groupsData:groupsData}）；
console.log（groupsData）//此处为console.log
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.groupsApi，status，err.toString（））；
}.绑定（此）
});
},
getItemsApi:函数（）{
$.ajax({
url:this.props.itemsApi，
数据类型：“json”，
键入：“GET”，
成功：功能（itemsData）{
this.setState（{itemsData:itemsData}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.groupsApi，status，err.toString（））；
}.绑定（此）
});
},
componentDidMount:function（）{
这个.getGroupsApi（）；
这个.getItemsApi（）；
},
render:function（）{
返回(
);
}
});
反应(
，document.getElementById（'widget-container'））
);

您试图在对象中使用映射

在

第一个渲染将获取groupsData中的对象 试着换成

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

var main菜单=React.createClass({
render:function（）{
console.log（this.props.groupsData）；//此处为console.log
var categories=this.props.groupsData.objects.map（函数（obj）{
返回（
对象描述
）；
});
返回(
{categories}
);
}
});
var BrowseWidgetBox=React.createClass({
getInitialState:函数（）{
返回{groupsData:{objects:[]}，itemsData:[]}；
},
getGroupsApi:function（）{
$.ajax({
url:this.props.groupsApi，
数据类型：“json”，
键入：“GET”，
成功：功能（组数据）{
this.setState（{groupsData:groupsData}）；
console.log（groupsData）//此处为console.log
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.groupsApi，status，err.toString（））；
}.绑定（此）
});
},
getItemsApi:函数（）{
$.ajax({
url:this.props.itemsApi，
数据类型：“json”，
键入：“GET”，
成功：功能（itemsData）{
this.setState（{itemsData:itemsData}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.groupsApi，status，err.toString（））；
}.绑定（此）
});
},
componentDidMount:function（）{
这个.getGroupsApi（）；
这个.getItemsApi（）；
},
render:function（）{
返回(
);
}
});
反应(
，document.getElementById（'widget-container'））
);

您是否尝试过在“getInitialState”中将数据定义为空数组而不是空对象？获取数据后，使用map（）进行处理，这是一种数组而不是对象的方法……是的，我有。我仍然收到相同的错误。是的，我更改了它。但这似乎没有什么区别。因为我仍然得到同样的错误。不必担心

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