在使用Mongo数据的情况下，您可以使用_id属性

arr.map((cell) =>
  <li key={cell._id}>{cell}
  </li>
);

我有一个唯一的键，只需要像这样传递它作为道具:

<CompName key={msg._id} message={msg} />

这个页面很有帮助:

https://reactjs.org/docs/lists-and-keys.html#keys

这是一个警告，但解决这个问题将使反应渲染更快，

这是因为React需要唯一地标识列表中的每个项。假设在React Virtual DOM中，如果列表中某个元素的状态发生了变化，那么React需要找出哪个元素发生了变化，以及它需要在DOM中的哪个位置发生变化，以便浏览器的DOM与React Virtual DOM保持同步。

作为解决方案，只需为每个li标记引入一个键属性。该键对于每个元素都应该是唯一的值。

react中定义唯一键的最佳解决方案: 在映射内部，初始化名称post，然后用key={post定义键。Id}或者在我的代码中，你看到我定义了名称item，然后我定义key by key={item. Id}:

< div className = "容器" > {职位。地图(项= > ( <div className="card border-primary mb-3" key={item.id}> . < div className = " card-header " > {item.name} < / div > <div className="card-body" > < h4 className = " card-title " > {item.username} < / h4 > < p className = "卡片文本" > {item.email} < / p > < / div > < / div > )} < / div >

在ReactJS中，如果你要渲染一个元素数组，那么每个元素都应该有一个唯一的键。通常这种情况会产生一个列表。

例子:

function List() {
  const numbers = [0,1,2,3];
 
  return (
    <ul>{numbers.map((n) => <li> {n} </li>)}</ul>
  );
}

 ReactDOM.render(
  <List />,
  document.getElementById('root')
);

在上面的例子中，它使用li标签创建了一个动态列表，所以由于li标签没有唯一键，所以它显示了一个错误。

固定后:

function List() {
  const numbers = [0,1,2,3];
 
  return (
    <ul>{numbers.map((n) => <li key={n}> {n} </li>)}</ul>
  );
}

 ReactDOM.render(
  <List />,
  document.getElementById('root')
);

当你没有唯一键时使用map的替代解决方案(react eslint不推荐这样做):

function List() {
  const numbers = [0,1,2,3,4,4];
 
  return (
    <ul>{numbers.map((n,i) => <li key={i}> {n} </li>)}</ul>
  );
}

 ReactDOM.render(
  <List />,
  document.getElementById('root')
);

实例:https://codepen.io/spmsupun/pen/wvWdGwG

当你创建一个没有特殊key属性的元素列表时，React中会出现“列表中的每个子元素都应该有一个唯一的“key”道具”警告。必须为循环中的每个元素分配键，以便为React中的元素提供稳定的标识。

我们可以将对象的id属性设置为唯一键。

export default function App() {
      const posts = [
{ id: 1, title: "First "},
{ id: 2, title: "Second" },
{ id: 3, title: "Third" }
 ];
 return (
<div>
    <ul>
        {posts.map(value => 
            <li key={value.id}>{value.title}</li>
        )}
    </ul>
</div>
 );}


//simple way

//if u using ant design remove the empty fragment...

//worng ans---> change to following crt ans

export default function App() {
      const posts = [
{ id: 1, title: "First "},
{ id: 2, title: "Second" },
{ id: 3, title: "Third" }
 ];
 {fields.map((field,index)=>{
return(
  <> //empty fragment
   <Row key={index}>
    <Col span={6}>hello</Col>
   </Row>
  </>
)
})}

 //correct ans
//remove the empty fragments after solve this key.prop warning problem
export default function App() {
      const posts = [
{ id: 1, title: "First "},
{ id: 2, title: "Second" },
{ id: 3, title: "Third" }
 ];
 {fields.map((field,index)=>{
return(
  <> //empty fragment
   <Row key={index}>
    <Col span={6}>hello</Col>
   </Row>
  </>
)
})}