Reactjs 两个孩子用相同的钥匙做出反应

应用程序运行正常，我的类确实添加了一个新元素，但我在控制台中看到下面的警告

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

[object
对象]

。键应该是唯一的，以便组件保持其 跨更新的标识。非唯一键可能会导致子项丢失 重复和/或忽略-该行为不受支持且可能 在未来版本中进行更改。 在div中（由ContentBody创建） 心满意足

这是我的渲染部分：

 return (
            <div ref={this.myRef} style={this.state.myHomeStyle} >
              {this.state.elements.map((i: any) => {
                console.log(">>i>>>>", i);
                return <span style={i.myStyle} key={i} >{i}</span>;
              })}
            </div>
        );

// Where i init 
 public componentDidMount() {

    console.log('componentDidMount');
    this.myDOM  = this.myRef.current;
    this.myDOM.addEventListener(myEventsList.adaptCss, this.adaptCss);

    this.add(12,this.INLINE_TEST_ELE, null);
    this.add(13,this.INLINE_TEST_ELE, null);

  }


// Function add 
private add = (id: number, content: any, event: any ) => {

    let localArr: any[] = [];
    let mEvent: any = null;

    if (event !== undefined) {
      mEvent = event;
    }

    localArr = this.state.elements;
    localArr.push(React.createElement("div", { key: id , onClick : mEvent }, content));

    this.setState(
      {
        elements: localArr,
        visibility : true,
      },
    );

  }

返回(
{this.state.elements.map（（i:any）=>{
console.log（“>>i>>>”，i）；
返回{i}；
})}
);
//我从哪里开始
公共组件didmount（）{
log（'componentDidMount'）；
this.myDOM=this.myRef.current；
this.myDOM.addEventListener（myEventsList.adaptecss，this.adaptecss）；
this.add（12，this.INLINE\u TEST\u ELE，null）；
this.add（13，this.INLINE_TEST_ELE，null）；
}
//函数添加
私有添加=（id:number，content:any，event:any）=>{
让localArr:any[]=[]；
let mEvent:any=null；
如果（事件！==未定义）{
mEvent=事件；
}
localArr=this.state.elements；
localArr.push（React.createElement（“div”，{key:id，onClick:mEvent}，content））；
这是我的国家(
{
元素：localArr，
能见度：是的，
},
);
}

有什么建议吗

更新： 以下是我的入门项目的链接：

---

您正在传递的是元素而不是索引。如果元素相同，则抛出错误。要传递索引，请使用第二个参数：

.map((element, index)=>

---

现在，使用

索引将为您提供不同的键。
您可以在map函数中传递另一个参数，如下所示：

this.state.elements.map((element, index) => {
   return <span style={element.myStyle} key={index} >{element}</span>;
});

this.state.elements.map（（元素，索引）=>{
返回{element}；
});

Array.prototype.map
函数的第二个参数实际上包含该数组中特定元素的当前索引

这样，您就可以确保您的密钥没有重复。
有关“密钥”相关警告和最佳实践的更多了解，请参见此

 function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

功能列表项（道具）{
//正确！无需在此处指定密钥：
返回
{props.value}
；
}
函数编号列表（道具）{
常量数=道具数；
const listItems=numbers.map（（number）=>
//正确！应在数组内指定密钥。
);
返回(

{listItems}

);
}
常量数=[1,2,3,4,5]；
ReactDOM.render(
,
document.getElementById（'root'））
);

有关更多信息，请访问此链接
我们不鼓励使用索引作为键，然后可能使用元素的id作为键或对象的任何其他唯一属性。我还需要知道
this.state.elements的内容，请在您的问题上说明，以便我们都知道。警告！在地图中使用索引可能有效，但不是一个好主意。当您交换列表中的项目时，键将保持不变，这将使您误以为它不需要更新。请参阅这篇博文，了解使用索引的完整说明不是一个好的选择。