React Native-Maps 已给Marker设key仍报列表子项需唯一key警告如何解决

问题原因 #

• 你在map遍历中返回的直接子元素是React Fragment（简写语法<></>），但你把key属性加给了内层的Marker组件，React要求列表遍历的直接根节点必须携带唯一key，所以警告本质是Fragment没有加key。
• 额外发现你坐标参数写反了：latitude（纬度）应该绑定vehicle.vl_lati，longitude（经度）应该绑定vehicle.vl_long，你当前写反了会导致标记点位置错误，严重时触发地图组件异常引发应用重启。

修复方案 #

把简写的Fragment替换为带key属性的完整Fragment写法，同时修正坐标参数，修改后的遍历代码如下：

{vehicles ?
vehicles.map((vehicle, _index) => {
              return (
                <React.Fragment key={vehicle.vid}>
                  <Marker
                    coordinate={{
                      latitude: vehicle.vl_lati, // 修正纬度参数
                      longitude: vehicle.vl_long, // 修正经度参数
                    }}
                    title={vehicle.co_name + ' - ' + vehicle.num_plate}
                    onPress={() => {
                      navigation.navigate(routes.BUS_STATUS, { car: vehicle, uTravel: travelDetials })
                    }}
                  >
                    <MaterialCommunityIcons
                      name="bus-marker"
                      color="red"
                      size={40}
                    />

                  </Marker>


                  {/* <MapViewDirections
                    origin={{
                      latitude: Number(vehicle.vl_lati) ? Number(vehicle.vl_lati) : 0,
                      longitude: Number(vehicle.vl_long) ? Number(vehicle.vl_long) : 0,
                    }}
                    destination={{
                      latitude: 1.326014,
                      longitude: 32.418924,
                    }}
                    apikey={GOOGLE_MAPS_APIKEY}
                    strokeWidth={3}
                    // strokeColor="hotpink"
                    strokeColor="green"
                    lineDashPattern={[1]}
                  /> */}
                </React.Fragment>
              )
            })
            : null}

补充说明 #

• 如果你不需要保留Fragment包裹（比如取消注释MapViewDirections后才需要同时返回两个组件），也可以直接去掉Fragment，把Marker作为map返回的唯一根节点，此时key加在Marker上也是有效的。
• 确认vehicle.vid是全局唯一的非重复值，如果存在重复id的情况，可以临时用index作为key兜底排查。

内容的提问来源于stack exchange，提问作者Julius Peter Odeke