在React中，无论何时您多次显示同一组件的不同信息，在您的情况下是PlantItem组件。react需要单独跟踪每个项目组件，以便它可以适应完全相同项目的更改。这可以通过在组件中包含一个“键”属性以及其他信息来完成。该键将确保每个工厂项目都被唯一标识和处理。但是要保证key prop的值是唯一的，并且对于任何两个组件都不相同，打个比方，可以把key prop看作是数据库的主键，对于任何两个相同的记录都是唯一的，并且不相同，所以解决方法很简单。

解决方案-1）假设您在对象中收到的“id”以及封面、标题和说明始终是唯一的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
function ShoppingList() {
  return (
    <ul className="lmj-plant-list">
      {plantList.map(({ id, cover, title, description }) => (
        <PlantItem
          key= id,
          to={"/logement/" + plantList.id + "/#"}
          id={id}
          title={title}
          cover={cover}
          description={description}
        />
      ))}
    </ul>
  );
}

**解决方案-2）**如果“id”不唯一，解决方法是使用“idx”变量，该变量将包含项目的当前计数，并且始终是唯一的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
function ShoppingList() {
  return (
    <ul className="lmj-plant-list">
      {plantList.map(({ id, cover, title, description },idx) => (
        <PlantItem
          key= idx,
          to={"/logement/" + plantList.id + "/#"}
          id={id}
          title={title}
          cover={cover}
          description={description}
        />
      ))}
    </ul>
  );
}

要了解更多信息，请查看this堆栈溢出线程，其中详细解释了它

在React中，当您需要在组件上循环时，您必须为该组件设置key属性，因此React将能够跟踪更改，例如，假设您渲染了100个工厂项目组件，React如何注意到工厂项目编号78已更改？！
下面是你的解决方法：

function ShoppingList() {
  return (
    <ul className="lmj-plant-list">
      {plantList.map(({ id, cover, title, description }) => (
        <PlantItem
          to={"/logement/" + plantList.id + "/#"}
          id={id}
          title={title}
          cover={cover}
          key={id}
          description={description}
        />
      ))}
    </ul>
  );
}

您还可以使用map方法提供的index作为第二个参数来设置key prop的值。

{plantList.map(({ id, cover, title, description }, index) => (
    <PlantItem
      to={"/logement/" + plantList.id + "/#"}
      id={id}
      title={title}
      cover={cover}
      key={index}
      description={description}
    />
  ))}