反应原生 - 使用 Array.prototype.map() 时键无法正常工作

Question

我在我的 React Native 代码中使用 Array.prototype.map() 来呈现列表中的一些类别，每个类别都可以作为 TextInput 进行编辑。我在父元素级别使用唯一键来呈现映射数组，但我仍然收到以下错误：

Warning: Encountered two children with the same key, [object Object]

有问题的代码块如下：

const CategoriesScreen = ({ navigation }) => {
  // Redux
  const categories = useSelector((state) => state.auth.categories);
  const dispatch = useDispatch();
  
  return (
    <ScrollView style={styles.flex}>
      <View style={styles.container}>
        <View style={styles.textContainer}>
          <Text>Category</Text>
        </View>
        <View style={styles.textContainer}>
          <Text>Update Priority</Text>
        </View>
        <Spacer />
      </View>
      {categories.map((category, index) => {
        return (
          <View key={category.id} style={styles.container}>
            <View style={styles.subContainer}>
              <TextInput
                multiline
                style={styles.textBoxes}
                value={category.name}
                onChangeText={(text) =>
                  dispatch(updateCategoryName({ index, text }))
                }
              />
            </View>
            <View style={styles.subContainer}>
              <View style={styles.icon}>
                <AntDesign
                  name="up"
                  size={24}
                  color="black"
                  onPress={() => dispatch(increasePriority(index))}
                />
              </View>
              <View style={styles.icon}>
                <AntDesign
                  name="down"
                  size={24}
                  color="black"
                  onPress={() => dispatch(decreasePriority(index))}
                />
              </View>
            </View>
            <View style={styles.subContainer}>
              <Feather
                name="delete"
                size={40}
                color="black"
                onPress={() => dispatch(deleteCategory(index))}
              />
            </View>
          </View>
        );
      })}
      <AntDesign
        name="plussquare"
        size={40}
        color="black"
        style={styles.addButtonStyle}
        onPress={() => dispatch(addCategory())}
      />
    </ScrollView>
  );
};

我正在映射的数据数组的一个例子：

const categories =  [
  {
    "id": "dc4422e4-1fff-cf90-ce9b-1fd57348cd52",
    "name": "Uncategorized"
  },
  {
    "id": "add5cb6c-53e6-30e7-b9be-b48ad394e216",
    "name": "new1"
  },
  {
    "id": "3fa3cb68-38d5-f54b-2cc0-f0584089c1c2",
    "name": "new2"
  },
]

您可以看到每个 id 都是完全唯一的。谁能帮我理解为什么我会收到这个关键错误？

Answer 1

纳康

当您在 render 函数内的 ma​​p 函数中渲染 React 组件时，您必须为每个组件提供一个 key 属性唯一的，否则 React 将在控制台中发出警告，并且可能会或可能不会在渲染时更新您的组件。

所以 Solution 将是一个 key 道具，应该是唯一的、稳定的和可重复的。

 {categories.map((category, index) => {
    return (
      <View category={category} key={category.id} style={styles.container}>
        <View style={styles.subContainer}>
          <TextInput
            multiline
            style={styles.textBoxes}
            value={category.name}
            onChangeText={(text) =>
              dispatch(updateCategoryName({ index, text }))
            }
          

在这种情况下，最佳做法是使用唯一 ID 支持您的对象。

Answer 2

您可以通过使用索引作为键来删除此警告

{categories.map((category, index) => {
    return (
      <View key={index.toString()} style={styles.container}>

警告将消失。

当您使用数据库 ID 或对象 ID 时，地图不知道该 ID 是唯一的，因此它会返回警告