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

我不断收到此警告“列表中的每个孩子都应该具有唯一的“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,
    )}

植物项目组件：

  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);
  });

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

React 键应该用于最外层映射的元素。

React 列表和键 https://reactjs.org/docs/lists-and-keys.html#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}
    />)
)}