React Native-Maps：警告：列表中的每个孩子都应该有一个唯一的“关键”道具

Question

我正在 React Native 中实现多个标记的显示。在Getting- Warning: Each child in a list should have a unique "key" prop. in my React Native app、How can I get rid of this warning message?: Each child in a list should have a unique "key" prop、Warning: Each child in a list should have a unique “key” prop、Warning - Each child in a list should have a unique "key" prop 等不同链接中检查帮助均未成功。它们都提供了一个键，例如索引，但同样的警告弹出并且应用程序重新启动。我的钥匙是vehicle.vid，如代码sn-p所示。我哪里错了？

....
 {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