React js：无法将数组中的第一个对象作为道具发送

我正在尝试构建一个小型 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]} />

我收到一条错误消息“无法读取未定义的属性项”，这意味着类别属性从未被分配。我知道 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>

        );
    }
});

您的主要组件使用空数组初始化状态data。渲染总是会失败，因为没有this.state.data[0].

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

如果信息立即可用，人们可以setState关于方法componentWillMount https://reactjs.org/docs/react-component.html#componentwillmount或组件构造函数，以避免触发第二次渲染：

componentWillMount() 在安装发生之前立即调用。它 在 render() 之前调用，因此在中同步设置状态 该方法不会触发重新渲染。避免引入任何 此方法中的副作用或订阅。

在这种情况下，由于我们正在等待远程信息，React文档仍然建议使用componentDidMount https://reactjs.org/docs/react-component.html#componentdidmount，也在这里使用：

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

因此，组件的 render 方法必须能够处理缺失的状态变量。有多种方法可以解决这个问题，但要防止嵌套元素被渲染，直到我们有data是最简单的方法。通过一些附加逻辑，应用程序可以通知用户特定组件正在加载。

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