Reactjs React map中的密钥问题

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

请查找下面的代码片段

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

const控件=[
{标签：“沙拉”，类型：“沙拉”}，
{标签：“培根”，键入：“培根”}，
{标签：“奶酪”，类型：“奶酪”}，
{标签：“肉”，类型：“肉”}
];
const BuildControls=props=>(
{controls.map（（项，索引）=>(
props.ingredientsAdded（item.type）}
已删除={（）=>props.ingredientsRemoved（item.type）}
disabled={props.disabled[item.type]}
/>
))}
);

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

警告：遇到两个具有相同密钥的子项，

1

。键应该是唯一的，以便组件在更新期间保持其标识。非唯一键可能会导致复制和/或忽略子项-不支持该行为，并且可能在将来的版本中更改。 在div中（由burgers创建） 汉堡中（由BurgerBuilder创建） 在Aux中（由BurgerBuilder创建） 在BurgerBuilder中（由应用程序创建） 在div中（由应用程序创建） 应用程序内

其实很简单

{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]}
   />
))}

其实很简单

{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]}
   />
))}

---

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

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

从“React”导入React；
从“react dom”导入react dom；
常数控制=[{
标签：“沙拉”，
类型：“沙拉”
},
{
标签：“培根”，
类型：“培根”
},
{
标签：“奶酪”，
类型：“奶酪”
},
{
标签：“肉”，
类型：“肉”
}
];
功能构建控制（道具）{
返回（{props.data.type}）
函数App（）{
报税表（{
controls.map（（项，索引）=>（））
} 
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

我想知道问题出在哪里，因为如果您查看此代码段，它不会给出任何错误。不确定

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

从“React”导入React；
从“react dom”导入react dom；
常数控制=[{
标签：“沙拉”，
类型：“沙拉”
},
{
标签：“培根”，
类型：“培根”
},
{
标签：“奶酪”，
类型：“奶酪”
},
{
标签：“肉”，
类型：“肉”
}
];
功能构建控制（道具）{
返回（{props.data.type}）
函数App（）{
报税表（{
controls.map（（项，索引）=>（））
} 
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

您确定

BuildControls

是问题的根源吗？我在堆栈跟踪的任何地方都看不到该组件。你的

BurgerBuilder

代码是什么样子的？编辑：我还将去掉

键

值的

+索引

部分。

键

的值应相同，即使项目已重新排序。但是，如果您重新排序

控件

数组，则所有键都将不同，并将其丢弃。只需使用

item.label

作为键。props.ingredientsAdded（item.type）}removed={（）=>props.ingredientsremove（item.type）}disabled={props.disabled[item.type]}/>也请发布完整的代码/小提琴链接，这样我们就可以调试了。我已经在中添加了我的工作。请检查并让我知道应该在BuildControls中添加什么您确定

BuildControls

是问题的根源吗？我在堆栈跟踪的任何地方都看不到该组件。你的

BurgerBuilder

代码是什么样子的？编辑：我还将去掉

键

值的

+索引

部分。

键

的值应相同，即使项目已重新排序。但是，如果您重新排序

控件

数组，则所有键都将不同，并将其丢弃。只需使用

item.label

作为键。props.ingredientsAdded（item.type）}removed={（）=>props.ingredientsremove（item.type）}disabled={props.disabled[item.type]}/>也请发布完整的代码/小提琴链接，这样我们就可以调试了。我已经在中添加了我的工作。请检查并让我知道应该在BuildControls中添加什么。传递数据没有问题，但密钥本身没有问题。OP需要设置一个唯一的键，因为他在

控件

数组中没有唯一的值。是的，你是对的，他编写的语法是错误的，应该是key={

${item.label}${index}

}替换后也没有用。传递数据没有问题，但是键本身没有问题。OP需要设置一个唯一的键，因为他在

控件

数组中没有唯一的值。是的，你是对的，他编写的语法是错误的，应该是key={

${item.label}${index}

}替换后也没有用。它不工作。请检查问题代码，它不工作。请检查问题代码