我正在通過陣列使用地圖。但即使在給出唯一鍵之后，我在谷歌瀏覽器控制臺中也收到了唯一鍵的錯誤。
錯誤
Each child in a list should have a unique "key" prop.
大批
"list": [
{
"dt": 1648189800,
"sunrise": 1648169391,
"sunset": 1648213378,
"temp": {
"day": 309.21,
"min": 299.16,
"max": 310.44,
"night": 303.45,
"eve": 309.79,
"morn": 299.28
},
"feels_like": {
"day": 306.39,
"night": 301.6,
"eve": 306.96,
"morn": 299.28
},
"pressure": 1009,
"humidity": 9,
"weather": [
{
"id": 804,
"main": "Clouds",
"description": "overcast clouds",
"icon": "04d"
}
],
"speed": 5.24,
"deg": 285,
"gust": 11.76,
"clouds": 87,
"pop": 0
},
{
"dt": 1648276200,
"sunrise": 1648255732,
"sunset": 1648299800,
"temp": {
"day": 309.62,
"min": 298.8,
"max": 310.99,
"night": 301.31,
"eve": 309.24,
"morn": 299.02
},
"feels_like": {
"day": 306.68,
"night": 299.88,
"eve": 306.35,
"morn": 298.18
},
"pressure": 1011,
"humidity": 7,
"weather": [
{
"id": 800,
"main": "Clear",
"description": "sky is clear",
"icon": "01d"
}
],
"speed": 6.91,
"deg": 314,
"gust": 10.83,
"clouds": 7,
"pop": 0
},
{
"dt": 1648362600,
"sunrise": 1648342072,
"sunset": 1648386221,
"temp": {
"day": 309.98,
"min": 297.87,
"max": 311.28,
"night": 302.58,
"eve": 310.11,
"morn": 297.87
},
"feels_like": {
"day": 306.96,
"night": 300.86,
"eve": 307.19,
"morn": 296.71
},
"pressure": 1011,
"humidity": 6,
"weather": [
{
"id": 800,
"main": "Clear",
"description": "sky is clear",
"icon": "01d"
}
],
"speed": 4.91,
"deg": 310,
"gust": 5.92,
"clouds": 5,
"pop": 0
},
{
"dt": 1648449000,
"sunrise": 1648428413,
"sunset": 1648472643,
"temp": {
"day": 310.9,
"min": 299.03,
"max": 312.7,
"night": 302.81,
"eve": 311.62,
"morn": 299.03
},
"feels_like": {
"day": 307.9,
"night": 301.03,
"eve": 308.38,
"morn": 298.22
},
"pressure": 1009,
"humidity": 9,
"weather": [
{
"id": 800,
"main": "Clear",
"description": "sky is clear",
"icon": "01d"
}
],
"speed": 4.89,
"deg": 307,
"gust": 12.1,
"clouds": 5,
"pop": 0
},
{
"dt": 1648535400,
"sunrise": 1648514753,
"sunset": 1648559065,
"temp": {
"day": 311.15,
"min": 298.89,
"max": 313,
"night": 302.85,
"eve": 311.98,
"morn": 298.89
},
"feels_like": {
"day": 307.98,
"night": 301.05,
"eve": 308.6,
"morn": 297.91
},
"pressure": 1008,
"humidity": 7,
"weather": [
{
"id": 800,
"main": "Clear",
"description": "sky is clear",
"icon": "01d"
}
],
"speed": 6.45,
"deg": 306,
"gust": 14.1,
"clouds": 4,
"pop": 0
},
{
"dt": 1648621800,
"sunrise": 1648601094,
"sunset": 1648645486,
"temp": {
"day": 311.22,
"min": 299.07,
"max": 313.3,
"night": 303.5,
"eve": 312.13,
"morn": 299.07
},
"feels_like": {
"day": 308.04,
"night": 301.56,
"eve": 308.73,
"morn": 298.14
},
"pressure": 1008,
"humidity": 7,
"weather": [
{
"id": 800,
"main": "Clear",
"description": "sky is clear",
"icon": "01d"
}
],
"speed": 6.69,
"deg": 305,
"gust": 14.42,
"clouds": 0,
"pop": 0
},
{
"dt": 1648708200,
"sunrise": 1648687435,
"sunset": 1648731908,
"temp": {
"day": 311.17,
"min": 298.97,
"max": 313.51,
"night": 302.55,
"eve": 312.26,
"morn": 298.97
},
"feels_like": {
"day": 308.15,
"night": 300.82,
"eve": 308.76,
"morn": 298.08
},
"pressure": 1009,
"humidity": 9,
"weather": [
{
"id": 800,
"main": "Clear",
"description": "sky is clear",
"icon": "01d"
}
],
"speed": 5.69,
"deg": 288,
"gust": 12.41,
"clouds": 4,
"pop": 0
}
]
代碼
{list &&
list.map((item) => {
return (
<>
<div
key={item?.speed} //Taking item speed as a KEY
className="bg-pink-200 rounded-lg border border-gray-200 shadow-md "
>
<div className="flex flex-col w-32 items-center p-3 text-center">
<h5 className="mb-1 text-lg font-medium text-gray-900 uppercase">
{dateprocessing(item?.dt).day} <b>{item.speed}</b>
</h5>
<h6 className="mb-1 text-sm text-gray-500 font-light">
{dateprocessing(item?.dt).date}
</h6>
<Image
src={imgurl}
height={40}
width={40}
alt="sunset"
/>
<span className="text-base text-gray-800 ">
{kelvinToCelcius(item?.temp?.day)} C
</span>
<span className="text-base text-gray-400 ">
{kelvinToCelcius(item?.temp?.night)} C
</span>
<div className="flex mt-4 lg:mt-6">
<a className="inline-flex items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 ">
{item.weather[0]?.description} and{" "}
{item.weather[0]?.main}
</a>
</div>
</div>
</div>
</>
);
})}
您可以從我item.speed作為 KEY 的代碼中看到。我看到這七個值中的每一個都是unique通過在前端顯示它們來實作的。
圖片
您可以
item.speed在 dayname 的右側看到 的值
item.speed = [5.24,6.91,4.91,4,89,6.45,6.69,5.69]
應該是什么可能的錯誤？？？
uj5u.com熱心網友回復：
發生這種情況是因為您要為串列中的每個專案回傳一個 React Fragment。要將密鑰與 Fragment 一起使用，您需要這樣做：
<React.Fragment key="your-key"> ... </React.Fragment>
根據檔案：
您可以像使用任何其他元素一樣使用 <></>，但它不支持鍵或屬性。
和
使用顯式 <React.Fragment> 語法宣告的片段可能有鍵。一個用例是將集合映射到片段陣列。
如果您想檢查以下是檔案：ReactJS Fragment docs
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/449938.html
標籤：javascript 反应 api 下一个.js 地图功能