首頁(yè) 猿問 React中使用map不能全部遍歷數(shù)組。

React中使用map不能全部遍歷數(shù)組。

JavaScript

慕尼黑8549860 2019-03-06 10:15:23

才使用map遍歷數(shù)組發(fā)現(xiàn)不能遍歷到數(shù)組最后一個(gè)元素。如果數(shù)組為空，map函數(shù)不執(zhí)行。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> )}

查看完整描述

4 回答

函數(shù)式編程

TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個(gè)贊

應(yīng)該是父組件后來給items添加的元素，console.log的不一定是執(zhí)行時(shí)候的數(shù)據(jù)，可以看下items的獲取

反對(duì) 回復(fù) 2019-03-30

嗶嗶one

TA貢獻(xiàn)1854條經(jīng)驗(yàn) 獲得超8個(gè)贊

render() {

return (

{

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

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

}

</div>

)

}

反對(duì) 回復(fù) 2019-03-30

翻閱古今

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超5個(gè)贊

已經(jīng)解決。后來仔細(xì)調(diào)試之后發(fā)現(xiàn)其實(shí)是由于this.props.items數(shù)組有元素，但長(zhǎng)度為0.同這個(gè)問題鏈接描述

反對(duì) 回復(fù) 2019-03-30

一只斗牛犬

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超2個(gè)贊

自己試驗(yàn)了一下，查看chrome這個(gè)調(diào)試工具是在你點(diǎn)開對(duì)象的時(shí)候去獲取當(dāng)前對(duì)象內(nèi)容的，而不是打印的時(shí)候，所以console中打印的比較準(zhǔn)確的是對(duì)象的摘要信息（也就是可以點(diǎn)擊展開的那個(gè)），比如上圖中的[] 和 (3)[{...},{...},{...}] 分別代表數(shù)組里面對(duì)象個(gè)數(shù)為0和3.