嘗試通過映射通過數組呈現多個ReactElements時出錯

我目前正在尋找通過循環通過已通過此組件的所有者中的道具傳遞的數組來呈現類中的多個元素。下面是一個例子：嘗試通過映射通過數組呈現多個ReactElements時出錯

render() { 
    return (
     <div style={this.styles.container}> 
      {this.props.matchup 
       ? this.renderMatchupWithTeams(this.props.matchup) 
       : this.renderDefaultMatchup()} 
     </div> 
    ) 
}

然後......

renderMatchupWithTeams(matchup) { 
    console.log('renderMatchupWithTeams', matchup); 
    return matchup.map(team => { 
     console.log(`team: ${team.name}, seed: ${team.seed}`); 
     return (
      <Team name="UCLA" 
         seed={matchup.seed}/> 
     ) 
    }); 
};

日誌中包括高亮顯示按預期在日誌中值迴歸的事實，但球隊組件不。

有關爲什麼組件未按預期呈現的任何想法？請注意，在這種情況下，forEach的結果與map相同。

**代碼已被更新，以反映正確的答案**

來源

2016-02-27 Dana White

你的'renderMatchupWithTeams'函數返回undefined。你應該閱讀一下'Array＃map'是如何工作的。如果你返回matchup.map，事情就會開始工作。 – Interrobang

在我的部分總監督。當然，當.map（）應用於數組時，新數組是預計爲。因此，我們必須返回 matchups.map才能獲得創建（投影）的新值（數組）。

來源

2016-02-27 23:42:07

你會附加固定的代碼並接受這個答案嗎？這樣可以幫助未來的訪問者。 – Pavlo

絕對。請參閱上面編輯的代碼和註釋。 –

如果不編輯問題的其餘部分，則不應編輯原始代碼;現在看起來你正在使用工作代碼，所以你的問題沒有意義。可能會保留原始代碼，然後添加一個腳註，其中包含一條說明您已意識到錯誤的附加信息，並在工作代碼中附加解釋，或者將工作代碼放入此答案中，並保留原始問題不變。（像帕夫洛建議的那樣接受這個答案也會很好） – philraj

嘗試通過映射通過數組呈現多個ReactElements時出錯

回答

相關問題