获取 - 警告：列表中的每个 child 都应该有一个唯一的 "key" 属性。在我的 React Native 应用程序中

Question

我为抽屉菜单创建了自定义菜单，我传递了一些道具，但我收到了这条警告消息：

Warning: Each child in a list should have a unique "key" prop.

CustomSideMenu.js

/* eslint-disable prettier/prettier */
import React from "react";
import { SafeAreaView, View, StyleSheet, Text } from "react-native";

import { DrawerContentScrollView, DrawerItem } from "@react-navigation/drawer";
import { Button, H1, H2, H3, Thumbnail } from "native-base";
import Ionicons from "react-native-vector-icons/Ionicons";
import { InAppBrowserService, ToastService } from "../services";

const CustomSidebarMenu = (props) => {
  const { state, descriptors, navigation } = props;
  let lastGroupName = "";
  let newGroup = true;

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <DrawerContentScrollView {...props}>
        <View style={styles.userInfoSection}>
          <View style={{ flexDirection: "row", marginTop: 15 }}>
            <Thumbnail
              source={{
                uri: "https://api.adorable.io/avatars/50/abott@adorable.png",
              }}
              size={50}
            />
            <View style={{ marginLeft: 15, flexDirection: "column" }}>
              <H1 style={styles.title}>John Doe</H1>
              <H3 style={styles.caption}>@j_doe</H3>
            </View>
          </View>

          {/* <View style={styles.row}>
                  <View style={styles.section}>
                      <H2 style={[styles.paragraph, styles.caption]}>80</H2>
                      <H3 style={styles.caption}>Following</H3>
                  </View>
                  <View style={styles.section}>
                      <H2 style={[styles.paragraph, styles.caption]}>100</H2>
                      <H3 style={styles.caption}>Followers</H3>
                  </View>
              </View> */}
        </View>
        {state.routes.map((route, _index) => {
          const {
            drawerLabel,
            activeTintColor,
            groupName,
            iconName,
            unFocusIconName,
          } = descriptors[route.key].options;
          if (lastGroupName !== groupName) {
            newGroup = true;
            lastGroupName = groupName;
          } else {
            newGroup = false;
          }
          return (
            <>
              {newGroup ? (
                <View style={styles.sectionContainer}>
                  <Text key={groupName} style={{ marginLeft: 16 }}>
                    {console.log("groupName: ", groupName)}
                    {groupName}
                  </Text>
                  <View style={styles.sectionLine} />
                </View>
              ) : null}
              <DrawerItem
                key={route.key}
                label={({ color }) => (
                  <Text style={{ color }}>
                    {console.log("route.key: ", route.key)}
                    {drawerLabel}
                  </Text>
                )}
                icon={({ focused, color, size }) => (
                  <Ionicons
                    color={color}
                    size={size}
                    name={focused ? iconName : unFocusIconName}
                  />
                )}
                focused={
                  state.routes.findIndex((e) => e.name === route.name) ===
                  state.index
                }
                activeTintColor={activeTintColor}
                onPress={() => navigation.navigate(route.name)}
              />
            </>
          );
        })}
      </DrawerContentScrollView>
      <View>
        <Text key="SignOut" style={{ marginLeft: 16 }}>
          SignOut
        </Text>
        <View style={styles.sectionLine} />
      </View>
      <DrawerItem
        key="99"
        icon={({ color, size }) => (
          <Ionicons name="ios-calculator-outline" color={color} size={size} />
        )}
        label="Sign Out"
        onPress={() =>
          ToastService.showToastWithGravityAndOffset("SignOut Message")
        }
      />
      <Text
        onPress={() => InAppBrowserService.openSamroid()}
        style={styles.webLink}
      >
        www.samroid.com
      </Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    marginTop: 10,
  },
  sectionLine: {
    backgroundColor: "gray",
    flex: 1,
    height: 1,
    marginLeft: 10,
    marginRight: 20,
  },
  userInfoSection: {
    paddingLeft: 20,
  },
  title: {
    fontSize: 16,
    marginTop: 3,
    fontWeight: "bold",
  },
  caption: {
    fontSize: 14,
    lineHeight: 14,
  },
  row: {
    marginTop: 20,
    flexDirection: "row",
    alignItems: "center",
  },
  section: {
    flexDirection: "row",
    alignItems: "center",
    marginRight: 15,
  },
  paragraph: {
    fontWeight: "bold",
    marginRight: 3,
  },
  drawerSection: {
    marginTop: 15,
  },
  bottomDrawerSection: {
    marginBottom: 15,
    borderTopColor: "#f4f4f4",
    borderTopWidth: 1,
  },
  preference: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
  webLink: {
    fontSize: 16,
    textAlign: "center",
    color: "grey",
  },
});

export default CustomSidebarMenu;

请帮助我，我是 React Native 的新手。

Answer 1

你这里有一个array_map：

{state.routes.map((route, _index) => {

您从中返回一个 jsx，例如：

return (
<>

改为：

return (
    <React.Fragment key={_index}>

或

return (
    <View key={_index}>

此警告将消失。

Reference

获取 - 警告：列表中的每个 child 都应该有一个唯一的 "key" 属性。在我的 React Native 应用程序中

Getting- Warning: Each child in a list should have a unique "key" prop. in my React Native app

navigation-drawer

reactjs

react-native