列表中的每个孩子都应该有唯一的“关键”道具

Question

我不断收到此警告“列表中的每个子项都应具有唯一的 'key' 道具”，即使我有具有不同键的唯一项。

每当我创建一个新的“植物”对象时，我都会给它一个新的 uuid

    setPlants(prevItems => {
      return [
        {name: newPlantName, key: uuid.v4(), timeInterval: null},
        ...prevItems,
      ];

我的 listItem 组件是用一个键设置的

<ListItem
        key={plant.key}

每当我打印我的列表时，所有“键”都有不同的 uuid。每次我刷新应用程序时都会出现警告，所以它可能是因为我正在使用数据库来访问数据？我不太确定，但我正在使用 mmkv 存储来自我的状态的数据，然后在应用首次打开时显示该数据。

这是完整的映射：

  {plants &&
    plants.map(plant =>
      plant ? (
        <PlantItem
          plant={plant}
          deletion={openDeleteOrCancel}
          setPlants={setPlants}
        />
      ) : null,
    )}

PlantItem 组件：

  return (
    <>
      <ActionSheet
        visible={actionSheetVisible}
        closeOverlay={() => {
          setActionSheetVisible(false);
        }}
        actions={actions}
      />

      <ListItem
        key={plant.key}
        onPress={() => {
          setActionSheetVisible(true);
        }}
        bottomDivider>
        <ListItem.Content key={plant.key} style={styles.listItemContainer}>
          <ListItem.Title>{plant.name}</ListItem.Title>
          {/* <Icon name="check" size={20} /> */}
        </ListItem.Content>
      </ListItem>
      {showAddTimeInterval && (
        <AddTimeInterval
          createTimeInterval={createTimeInterval}
          closeModal={toggleShowAddTimeInterval}
          plantName={plant.name}
        />
      )}
    </>
  );

这就是我的状态开始的方式

  const [plantsStorage, setPlantsStorage] = useStorage('plantss');

  const [plants, setPlants] = useState(plantsStorage ? plantsStorage : []);

  useEffect(() => {
    setPlantsStorage(plants);
  });

这个警告真的很烦人，如果没有办法改变我的代码来修复它有没有办法以某种方式静音它？仅针对此特定警告，并非所有警告。

Answer 1

应在 最外层 映射元素上使用 React 键。

反应Lists and Keys

{plants.map(plant =>
  plant ? (
    <PlantItem
      key={plant.key} // <-- use key here!
      plant={plant}
      deletion={openDeleteOrCancel}
      setPlants={setPlants}
    />
  ) : null,
)}

建议，过滤plants数组以去除空“洞”。

{plants
  .filter(Boolean) // include only truthy plant objects
  .map(plant => (
    <PlantItem
      key={plant.key} // <-- use key here!
      plant={plant}
      deletion={openDeleteOrCancel}
      setPlants={setPlants}
    />)
)}