通過Javascript中的映射函數傳遞鍵值

我收到有關陣列中每個需要密鑰的孩子的警告。我以前就遇到過這一點，我在CoffeeScript的解決了這個問題："Each child in an array should have a unique key prop" only on first time render of page 通過Javascript中的映射函數傳遞鍵值

我知道，我必須通過map在關鍵傳球，讓每個陣列的map通話將獲得一個唯一的密鑰。在CoffeeScript中，我可以這樣做：

component1 = React.createClass({ 
    render:() -> 
     _.chain(@state.users).map((x) -> <component2 profile={x} key={x.id} />),@).value() 
)} 

component2 = React.createClass({ 
render:() -> 
    return (
     <div>Test</div> 
     <div>Test</div> 
    ) 
})

我已經嘗試做這在Javascript，而不是調用一個新的組件，我打電話是同一組件內的其他功能。我仍然收到了警告：

export default class About extends React.Component { 
    aboutMe(item) { 
     return (
      <div className="col-xs-12"> 
       <div className="about-body"> 
        <p>{item.description}</p> 
       </div> 
      </div> 
     ) 
    } 

    render() { 
     return (
      <div className="container"> 
       <div className="row"> 
        <div className="col-xs-9"> 
         {_.chain(this.props.about).map(this.aboutMe).value()} # How would I pass in a key in this `map`? 
        </div> 
       </div> 
      </div> 
     ) 
    }

來源

2016-08-20 patrickhuang94

那麼，什麼是' this.aboutMe'，它看起來像你正在使用它作爲一個函數，你可能想'.map（x => x.aboutMe）'或類似的東西。 – adeneo

你做同樣的事情，如果item具有可作爲鑰匙的ID（或其他財產）（demo）：

aboutMe(item) { 
    return (
     <div className="col-xs-12" key={ item.id }> 
      <div className="about-body"> 
       <p>{item.description}</p> 
      </div> 
     </div> 
    ) 
}

來源

2016-08-20 20:15:02

我想我應該從調用函數的地方傳入密鑰。我也嘗試在'aboutMe（）'中傳入一個鍵，但警告仍然顯示。 – patrickhuang94

數組'aboutMe（）'創建的每個JSX元素都應該有一個鍵。你也可以在'aboutMe（）'中做。 –

我已經給答案添加了一個演示。看看控制檯，看看沒有關於'key'的警告。然後刪除'key = {item.id}'，運行它，然後再次檢查控制檯。順便說一句 - 我用'.map（）'而不是lodash的地圖。 –

通過Javascript中的映射函數傳遞鍵值

回答

相關問題