React JSX ListItem Key concat

要模塊化我的應用程序，我正在動態創建列表。數據顯示正常，但是，我無法實現唯一的列表項ID。我正試圖設置鍵被映射的數組項與prop連接。React JSX ListItem Key concat

render() { 
    return (
     <div> 
     <Header as='h3'>{this.props.data['Day'+this.props.day]}</Header> 
     <ul> 
      {this.props.cities.map((park) => <li key={park+this.props.day}>{park} {this.props.data[park+'Day'+this.props.day+'PrecipPercent']}</li>)} 
     </ul> 
     </div> 
    ) 
}

我通過這個片段

let eachDay = []; 
for (var i = 0; i < this.state.days; i++) { 
     eachDay.push(<MultiParkDetails cities={this.state.sortedCities} data={this.state.weatherData} cols={5} day={i}></MultiParkDetails>); 
    } 
return ({eachDay})

來源

2017-04-05 P. Jack

你可以在這裏發表什麼你的'城市'數組看起來像什麼？ – vasekhlav

只要你可以使用數組作爲關鍵的指標，它永遠是獨一無二的。使用這個：

let eachDay = []; 
for (var i = 0; i < this.state.days; i++) { 
     eachDay.push(<MultiParkDetails key={i} cities={this.state.sortedCities} data={this.state.weatherData} cols={5} day={i}></MultiParkDetails>); 
    } 
return ({eachDay})

來源

2017-04-05 16:48:29

這裏的問題是我運行了幾次，並在頁面上顯示多個列表，所以會出現重複的0-4鍵 –

是否會引發任何錯誤或警告？有沒有在這個獨特的數據？ –

對不起，這是正確的答案，我第一次誤讀。謝謝！ –

這裏的問題調用組件是你需要添加鍵添加到其創建並推入陣列組件本身。

let eachDay = []; 
for (var i = 0; i < this.state.days; i++) { 
     eachDay.push(<MultiParkDetails key={ uniqueKeyGoesHere} cities={this.state.sortedCities} data={this.state.weatherData} cols={5} day={i}></MultiParkDetails>); 
    } 
return ({eachDay})

你不把鑰匙中的各個組件，您聲明它實際上當你正在使用的每個循環將它們推到一個數組通過地圖或在這種情況下。

查看你的答案你把它糾正位置：

{this.props.cities.map((park) => <li key={park+this.props.day}>{park} {this.props.data[park+'Day'+this.props.day+'PrecipPercent']}</li>)}

只要值級聯是獨一無二的。如果您在收到任何警告後請在這裏發帖。你會得到兩個警告中的一個，一個是你沒有在需要的時候設置一個鍵，另一個是警告說重複鍵被發現意味着你沒有使用足夠的鍵。

有關鍵的詳細信息，可以看到Facebook的文檔瀏覽：https://facebook.github.io/react/docs/lists-and-keys.html#keys

來源

2017-04-05 16:46:16 finalfreq

頂部的解決方案啊固定它。我需要爲MultiParkDetails組件添加一個鍵。 –

React JSX ListItem Key concat

回答

相關問題