Javascript React Google Maps循环中的唯一键错误

我得到了这个react google maps组件，它正在工作，我收到来自不同位置的所有数据，但控制台给了我以下错误消息：

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

在我的组件中，我添加了一个唯一的密钥tho。。有什么问题吗

我在页面上导入map组件，就像这样

从“React”导入React
从“react google maps”导入{GoogleMap，Marker，withGoogleMap，withScriptjs，InfoWindow}
从“盖茨比”导入{useStaticQuery，graphql}
常量映射=（）=>{
常量数据=useStaticQuery（graphql`
{
所有知足酒店{
节点{
身份证件
标题
位置{
拉特
朗
}
}
}
}
`)
常数{
allContentfulHotels:{节点：位置}，
}=数据
返回(
{locations.map（{location}）=>{
控制台日志（位置）；
返回(
)
})}
)
}
const MapComponent=withScriptjs（withGoogleMap（Map））；
常量MyMap=（）=>(
)
导出默认MyMap

---

希望有人知道问题所在。

看起来您为

和

组件指定了相同的键，请尝试为组件设置不同的键：

<GoogleMap
  key={`map-${location.id}`}
  defaultZoom={15}
  defaultCenter={{
    lat: location.lat,
    lng: location.lon,
  }}
>
  <Marker
     key={`marker-${location.id}`}
     position={{
       lat: location.lat,
       lng: location.lon,
     }}
  >
  </Marker>
</GoogleMap>

立即获取此错误：遇到两个具有相同密钥的子项，

映射未定义

。键应该是唯一的，以便组件在更新期间保持其标识。非唯一键可能会导致子项被复制和/或忽略-该行为不受支持，并且可能在将来的版本中发生更改。我希望默认中心是标记的位置，因此我实际上使用了两次相同的ID，我甚至可以为默认中心使用多个位置吗？我想实现默认中心与标记相同，这意味着

location.id

未定义。至于其他问题，我帮不了你，因为最初的问题是关于React，而不是

React谷歌地图

library。

<GoogleMap
  key={`map-${location.id}`}
  defaultZoom={15}
  defaultCenter={{
    lat: location.lat,
    lng: location.lon,
  }}
>
  <Marker
     key={`marker-${location.id}`}
     position={{
       lat: location.lat,
       lng: location.lon,
     }}
  >
  </Marker>
</GoogleMap>