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() {

    return (

        <div id='itemcontainer'>

            {

                this.props.items.length>0 && this.props.items.map((i)=>{

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

               }

        </div>

    )

}

Answer 3

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

Answer 4

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