Javascript React js:Can´；t将数组中的第一个对象作为道具发送

我正在尝试构建一个小型React.js应用程序，我的组件结构如下所示：

MainComponent
    - CategoryList
        -Category
    - ItemsList 
        -Item

My MainContent组件在

componentDidRender:

中对其状态数据执行ajax请求，该请求返回以下对象：

data:[
Object[0]
 -name
 -items[]
,
Object[1],
Object[2]
]

现在，我希望我的CategoryList按名称写出所有类别，这很好，但我还希望打印出所选类别的项目。这是我的ItemsList组件：

 var ItemsList = React.createClass({
    render:function(){

         var itemNodes = this.props.category.items.map(function(item){
            return (
                <Item name={item.name} />
            );
        });

        return(
            <div className="itemList">
            {itemNodes}
            </div>
        );
    }
});

var ItemsList=React.createClass({
render:function（）{
var itemNodes=this.props.category.items.map（函数（项）{
返回(
);
});
返回(
{itemNodes}
);
}
});

这就是我如何从父组件传递“category”属性的方法

<ItemsList category={this.state.data[0]} />

我得到一个错误，说“无法读取未定义的属性项”，这意味着从未分配类别属性。我知道this.state.data包含一个对象数组，所以我看不到这里的错误

我做错了什么

编辑：根据请求，这是我的主要组件：

var MainComponent = React.createClass({
    getInitialState:function(){
        return {data: []};
    },
    componentDidMount:function(){
        $.ajax({
            type:'get',
            url: '/categories',
            dataType: 'json',
            success:function(data){
                this.setState({data: data});
            }.bind(this)

        });
    },
    render: function(){
        return (
        <div className="row">
            <div className="col-md-6">
                <CategoryList categories={this.state.data} />
            </div>
            <div className="col-md-6">
            <ItemsList category={this.state.data[0]} />
            </div>
        </div>

        );
    }
});

var MainComponent=React.createClass({
getInitialState:函数（）{
返回{data:[]}；
},
componentDidMount:function（）{
$.ajax({
类型：'get'，
url:“/categories”，
数据类型：“json”，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此）
});
},
render:function（）{
返回(
);
}
});

您的主组件使用

数据中的空数组初始化状态。渲染总是会失败，因为没有
this.state.data[0]

有人可能会回答说，ajax请求将为该状态属性
data
提供值（假设您的web服务提供有效数组）但是，这仅在从服务器收到响应后发生，而在第一次渲染后不会发生

如果信息立即可用，可以在方法或组件构造函数上设置状态，以避免触发第二次渲染：

componentWillMount（）在装入之前立即调用。信息技术
在render（）之前调用，因此在中同步设置状态
此方法不会触发重新渲染。避免引入任何
此方法中的副作用或订阅

在这种情况下，由于我们正在等待远程信息，React文档仍然建议使用以下内容：

componentDidMount（）在创建组件后立即调用
安装。需要DOM节点的初始化应该在这里进行。如果你
需要从远程端点加载数据，这是一个好地方
实例化网络请求。此方法中的设置状态将
触发重新渲染

因此，组件的render方法必须能够处理缺少的状态变量。有多种方法可以实现这一点，但在我们拥有
数据之前防止嵌套元素被渲染是最简单的方法。通过一些附加逻辑，应用程序可以通知用户特定组件正在加载

render() {
    return (
    <div className="row">
        <div className="col-md-6">
            <CategoryList categories={this.state.data} />
        </div>
        <div className="col-md-6">
          {this.state.data.length > 0 &&
            <ItemsList category={this.state.data[0]} />
          }
        </div>
    </div>
    );
}

render（）{
返回(
{this.state.data.length>0&&
}
);
}
哇，答案太棒了！非常感谢。