React js:不能将数组中的第一个对象作为prop发送

Question

我试图构建一个小的React.js应用程序,我的组件结构如下所示:

MainComponent
    - CategoryList
        -Category
    - ItemsList 
        -Item

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

这就是我从父组件传递"类别"属性的方法

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

我收到错误说"无法读取未定义的属性项",这意味着类别道具从未被分配.我知道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>

        );
    }
});

Answer 1

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

有人可能会回复ajax请求将为此state属性提供值data(假设您的Web服务提供了有效的数组).但是,这仅在从服务器收到响应后才会发生,这在第一次渲染后不会发生.

如果信息立即可用,则可以setState在方法componentWillMount或组件构造函数上,以避免触发第二个渲染:

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

在这种情况下,由于我们正在等待远程信息,React文档仍然建议使用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>
    );
}