ReactJS的渲染函數循環

-1

我可以知道下面的代碼有什麼問題嗎？我認爲在<TextNote>標記的循環中出現了問題，但由於沒有錯誤消息，所以我不能說出錯。謝謝ReactJS的渲染函數循環

編輯僅供參考，只顯示按鈕，文本筆記根本不顯示。 TextNote是另一個JS文件，它本身完美。

render() { 
return (
    <div className="textBoard"> 
    {this.state.textNotes.forEach((note) => { 
     return (<TextNote key={note.id} 
        id={note.id} 
        onChange={this.update} 
        onRemove={this.remove}> 
       {note.note} 
     </TextNote>) 
    } 
    )} 
    <button onClick={() => this.add('New Text')}>ADD</button> 
    </div> 
)}

來源

2016-10-25 Victorgalaxy

嗨維克多 - 什麼是你所得到的結果，什麼是你期待的結果？ –

「我認爲有些事情是錯的」---你爲什麼認爲它是？ – zerkms

「文本筆記根本沒有呈現」 - 這是因爲Array.prototype.forEach沒有返回任何內容，而是想要'Array.prototype.map'。 – zerkms

forEach不需要return。改爲使用map。

render() { 
return (
    <div className="textBoard"> 
    {this.state.textNotes.map((note) => { 
     return (<TextNote key={note.id} 
        id={note.id} 
        onChange={this.update} 
        onRemove={this.remove}> 
       {note.note} 
     </TextNote>) 
    } 
    )} 
    <button onClick={() => this.add('New Text')}>ADD</button> 
    </div> 
)}

來源

2016-10-25 07:20:58

你可以把它與forEach方法也工作，但有點不同的方式。

render(){ 
    const items = []; 
    this.state.textNotes.forEach((note) => { 
    items.push(<TextNote // instead of return push it in an array 
       key={note.id} 
       id={note.id} 
       onChange={this.update} 
       onRemove={this.remove}> 
       {note.note} 
       </TextNote> 
    }) 
    return <div> 
    {items} 
    </div> 
}

我也建議使用map代替forEach，希望它會幫助你

來源

2016-11-05 19:35:42

ReactJS的渲染函數循環

回答

相關問題