不能循环来自react-native-maps的多个标记

Question

所以我有从firebase获取的餐厅数据。数据以餐馆的形式存储。数据如下:

[
{
"resName": "KFC",
"photoUri": "https://firebasestorage.googleapis.com:443/v0/b/zomato-e0030.appspot.com/o/restaurants%2FDDB3BC53-C787-4D8F-8945-AD56CBEC89C8.jpg?alt=media&token=bb26bff4-9a49-459f-bef0-63cd6f31f428",
"phNo": "6786785894",
"userId": "d4cbsBEB4pTMsHHpXT8gkleQMA52",
"desc": "yhduhw",
"address": "{"latitude":37.78716805152233,"longitude":-122.40707527846098}",
"key": "W2Vt5I8tkBoLsBGJ5WWK"
},
{
"resName": "Thalapakatii",
"photoUri": "https://firebasestorage.googleapis.com:443/v0/b/zomato-e0030.appspot.com/o/restaurants%2F4FF27972-6246-48FE-B087-FCAE7E3609B9.jpg?alt=media&token=29c5b686-c509-479a-8528-647701f9dad0",
"phNo": "9806789890",
"userId": "d4cbsBEB4pTMsHHpXT8gkleQMA52",
"desc": "Non Veg Restaurant",
"address": "{"latitude":37.78315900527187,"longitude":-122.4291666224599}",
"key": "ZC2G5Pw6jhRkS6TXrnlo"
},
{
"resName": "Domino’s",
"photoUri": "https://firebasestorage.googleapis.com:443/v0/b/zomato-e0030.appspot.com/o/restaurants%2F54294088-871D-4791-9DE7-B448172A9176.jpg?alt=media&token=f4556591-ede1-4113-831d-a5beb03216c8",
"phNo": "9879879873",
"userId": "d4cbsBEB4pTMsHHpXT8gkleQMA52",
"desc": "Fast Food",
"address": "{"latitude":37.75686216886715,"longitude":-122.4325693398714}",
"key": "w4MsQ3l92hrwzqUBLEAh"
}
]

当我尝试循环数组时，文本组件呈现为地图上的餐厅名称，但标记不位于所需的坐标

restaurants.length>0&&restaurants.map((res,index)=>{
let coordinate = JSON.parse(res.address);
return(
<>
<Marker
key={index}
pinColor="purple"
coordinate={coordinate}
/>
<Text>{res.resName}</Text> 
</>
)
})

Answer 1

您是否收到以下警告?

"列表中的每个子节点都应该有一个唯一的"键"prop"

尝试将他们的关键道具更改为key={res.resName + index}。