无法从 react-native-maps 循环多个标记答案

【问题标题】：Cannot loop multiple markers from react-native-maps无法从 react-native-maps 循环多个标记
【发布时间】：2021-11-12 08:21:48
【问题描述】：

所以我有从 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> 
            </>
          )
         })

【问题讨论】：

你能通过JSON.parse(res.address);得到正确的坐标吗？
是的，我得到了正确的坐标
我认为你必须改变 {"latitude":37.75686216886715,"longitude":-122.4325693398714} 而不是 "{\"latitude\":37.75686216886715, \"经度\":-122.4325693398714}"
当我使用 JSON.parse() 解析地址时，字符串将被转换为对象键，例如 {latitude:37.75686216886715,longitude:-122.4325693398714}。所以这可能不是问题

标签： react-native react-native-ios react-native-maps

【解决方案1】：

您是否收到以下警告？

“列表中的每个孩子都应该有一个唯一的“key”道具”

尝试将他们的密钥属性更改为key={res.resName + index}。

【讨论】：

每个restaurant 都有一个key 属性，我建议使用它而不是您的答案
试过没用