React Native-Maps：警告：列表中的每个 child 都应该有一个唯一的 "key" 道具

Question

我正在 React Native 中实现多个标记的显示。在不同的链接（例如 , How can I get rid of this warning message?: Each child in a list should have a unique "key" prop, , 等）中寻找帮助，但没有成功。它们都提供了一个额外的键，例如索引，但弹出相同的警告并重新启动应用程序。如代码片段所示，我的密钥是 vehicle.vid。我错了什么？

....
 {vehicles ?
 vehicles.map((vehicle, _index) => {

              return (
                <>
                  <Marker
                    key={vehicle.vid}
                    coordinate={{
                      latitude: vehicle.vl_long,
                      longitude: vehicle.vl_lati,
                    }}
                    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]}
                  /> */}
                </>
              )
            })
            : null}
        </MapView>
      </View>
      <TouchableWithoutFeedback
      // onPress={() => {
      //   console.log("Map Clicked");
      // }}
      >
        <View
          style={{
            padding: 10,
            color: colors.primary,
          }}
        >
          <View style={styles.row1}>
            <Feather name="activity" color={colors.iconColor} size={40} />
            <Text style={{ color: colors.text }}>
              No. of Available Vehicles: {vehicles.length}
            </Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
    </>
  )
}
...

Answer 1

您需要将键添加到最顶级的元素。你的情况是片段（<>）而不是 <Marker> 组件。您可以像这样向片段添加一个键：

 {vehicles ?
 vehicles.map((vehicle, _index) => {

              return (
                <React.Fragment key={vehicle.vid}> // Was <>
                  <Marker
                    coordinate={{
                      latitude: vehicle.vl_long,
                      longitude: vehicle.vl_lati,
                    }}
                    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>
               ...
               </React.Fragment>

查看 React 文档以获取更多信息：Fragment Docs

React Native-Maps：警告：列表中的每个 child 都应该有一个唯一的 "key" 道具

React Native-Maps: Warning: Each child in a list should have a unique "key" prop

react-native

react-native-maps