reactjs Uncaught TypeError：无法读取未定义的属性“地图”

Question

我在我的BrowseWidgetBox 组件上使用了getInitialState。虽然在将数据传递给我的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')
                );

Answer 1

您正在尝试在对象中使用地图...

在

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

第一次渲染正在获取 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')
                );