React中使用map不能全部遍历数组。

Question

才使用map遍历数组发现不能遍历到数组最后一个元素。如果数组为空，map函数不执行。

render() {

    console.log(this.props.items);

    var Items=this.props.items.map((i)=>{

        return <RecipeItem key={i} id={i} RemoveId={this.handleRemoveId.bind(this)} />

    });

    console.log(Items);

    return (

        <div id='itemcontainer'>

            {Items}

        </div>

    )

}

Answer 1

应该是父组件后来给items添加的元素，console.log的不一定是执行时候的数据，可以看下items的获取

Answer 2

render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div id='itemcontainer'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.props.items.length>0 && this.props.items.map((i)=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return( <RecipeItem key={i} id={i} RemoveId={this.handleRemoveId.bind(this)}/>)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}

Answer 3

已经解决。后来仔细调试之后发现其实是由于this.props.items数组有元素，但长度为0.同这个问题链接描述

Answer 4

自己试验了一下，查看chrome这个调试工具是在你点开对象的时候去获取当前对象内容的，而不是打印的时候，所以console中打印的比较准确的是对象的摘要信息（也就是可以点击展开的那个），比如上图中的[] 和 (3)[{...},{...},{...}] 分别代表数组里面对象个数为0和3.