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

MainComponent
    - CategoryList
        -Category
    - ItemsList 
        -Item

我的 MainContent 组件对其状态数据执行 ajax 请求componentDidRender:，返回此对象：

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

这就是我从父组件传递“类别”属性的方式

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

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

我做错了什么？

编辑：根据请求，这是我的 MainComponent：

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>

        );
    }
});