React map中的密钥问题

Question

我试图通过在索引中添加标签名来在映射上迭代时生成唯一键。

请查找下面的代码片段。

const controls = [
  { label: "Salad", type: "salad" },
  { label: "Bacon", type: "bacon" },
  { label: "Cheese", type: "cheese" },
  { label: "Meat", type: "meat" }
];

const BuildControls = props => (
  <div className="BuildControls">
    {controls.map((item, index) => (
      <BuildControl
        ```key={item.label + index}```
        label={item.label}
        added={() => props.ingredientsAdded(item.type)}
        removed={() => props.ingredientsRemoved(item.type)}
        disabled={props.disabled[item.type]}
      />
    ))}
  </div>
);

当我尝试重复添加项目时，出现以下错误。

警告：遇到两个具有相同密钥的子项，1。键应该是唯一的，以便组件在更新期间保持其标识。非唯一键可能会导致复制和/或忽略子项-不支持该行为，并且可能在将来的版本中更改。在burgers（由burgers创建）中的div（由BurgerBuilder创建）中的Aux（由BurgerBuilder创建）中的BurgerBuilder（由应用程序创建）中的div（由应用程序创建）中的应用程序

Answer 1

我想知道问题是什么，因为如果你看这个片段，它不会给出任何错误。不确定BuildControl组件中有什么逻辑。

import React from "react";
import ReactDOM from "react-dom";


const controls = [{
   label: "Salad",
   type: "salad"
  },
  {
   label: "Bacon",
   type: "bacon"
  },
  {
   label: "Cheese",
   type: "cheese"
  },
  {
  label: "Meat",
  type: "meat"
  }
  ];


function BuildControl(props) {
  return ( <h1> {props.data.type} </h1>)}

function App() {
  return ( <div className = "BuildControls" > {
     controls.map((item, index) => (<BuildControl data = {item}/>))
   } </div>
 );
}

const rootElement = document.getElementById("root");
ReactDOM.render( <App/> , rootElement);

Answer 2

其实很简单，

{controls.map((item, index) => (
   <BuildControl
      key={`${item.label}${index}`}
      label={item.label}
      added={() => props.ingredientsAdded(item.type)}
      removed={() => props.ingredientsRemoved(item.type)}
      disabled={props.disabled[item.type]}
   />
))}

最新消息

警告来自您的汉堡。js文件，您正在创建重复的键，执行此操作，

<BurgerIngredient key={`${item}${i}`} type={item} />