反應js組件，地圖工程，foreach不

我有一個呈現標記的組件。它通過一個Map循環並顯示數據。我嘗試使用forEach，但它不起作用。然而，如果我將地圖轉換爲數組（foreach不能在數組上工作），它會起作用。我在這裏錯過了什麼？反應js組件，地圖工程，foreach不

這工作：

render(){ 
    return(
     <div class="container"> 
      {Array.from(this.props.tags.values()).map((tag,i) => (
       <Tag 
        handleKeyDown={this.handleKeyDown.bind(this)} 
        handleBlur={this.handleBlur.bind(this)} 
        handleTouchTap={this.handleTouchTap.bind(this)} 
        handleRequestDelete={this.handleRequestDelete.bind(this)} 
        tag={tag} 
        key={i} 
       /> 
      ))} 
     </div> 
    ) 
}

這不：

render(){ 
    return(
     <div class="container"> 
      {this.props.tags.forEach((tag,i) => (
       <Tag 
        handleKeyDown={this.handleKeyDown.bind(this)} 
        handleBlur={this.handleBlur.bind(this)} 
        handleTouchTap={this.handleTouchTap.bind(this)} 
        handleRequestDelete={this.handleRequestDelete.bind(this)} 
        tag={tag} 
        key={i} 
       /> 
      ))} 
     </div> 
    ) 
}

來源

2017-02-25 Gopid

Map#forEach不會返回一個新的數組。它們的工作方式與您期望的完全相同，Array#map用於構建從舊映射映射的新陣列。 React.createElement需要將其子作爲參數列表或數組。一般而言，您希望將Map看作更像一個普通的Object而不是數組，即如果要分別管理其值，則將其轉換爲數組。

您的Array.from使用是一種很好的方法。這就是我通常使用Map的方式。如果你想使用它來實現現代化，並避免其中一個迭代（儘管我只能想到最極端情況下的問題），那麼你總是可以對你的Map的值應用迭代器函數，然後傳播迭代器。

render() { 
    const asTags = function*() { 
    for (const [key, tag] of this.props.tags) { 
     yield <Tag tag={tag} key={key} />; 
    } 
    }; 

    return (
    <div class="container"> 
     {[...asTags()]} 
    </div> 
); 
}

發電機功能是一種簡單的迭代器，這yield s各自的條目在你的地圖遍歷。我只在那裏使用數組，因爲我不完全確定如何在JSX中傳播參數（我不使用JSX的一個原因）。如果將React.createElement導入爲ce，則可以在渲染中簡單地說ce('div', { class: 'container' }, ...asTags())。

來源

2017-02-25 19:08:25

謝謝！除了將地圖轉換爲數組並使用地圖之外，還有更好的方法嗎？ – Gopid

當然，@Gopid，我用一個使用生成器的例子更新了答案，它可以避免迭代一次以轉換爲數組，並且可以直接迭代並將條目映射到新格式。 –

反應js組件，地圖工程，foreach不

回答

相關問題