使用UUID lib创建一个随机UUID: 执行NPM install uuid命令

import { v4 as uuid } from "uuid";

array.map((item) =>
  <li key={uuid()}>{item}
  </li>
);

根据React文档，每一行/项都应该有一个唯一的键。

键帮助React识别哪些项已经更改、添加或删除。

就我个人而言，我更喜欢使用加密接口来生成一个随机UUID: (crypto在vanilla-js中是内置的)

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
  <li key={crypto.randomUUID()}>item {number}
  </li>
);

只需将唯一键添加到组件

data.map((marker)=>{
    return(
        <YourComponents 
            key={data.id}     // <----- unique key
        />
    );
})

在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

您应该为每个子元素以及子元素中的每个元素添加一个键。

这样React就可以处理最小的DOM更改。

在代码中，每个<TableRowItem key={项。id} data={item} columns={columnNames}/>试图在其中呈现一些没有键的子元素。

请看这个例子。

尝试从div的<b></b>元素中删除key={i}(并检查控制台)。

在本例中，如果我们没有给<b>元素一个键，并且我们只想更新对象。在city中，React需要重新渲染整个行，而不仅仅是元素。

代码如下:

const data = [
  { name: "Nuri", age: 28, city: "HO" },
  { name: "Talib", age: 82, city: "HN" },
  { name: "Jenny", age: 41, city: "IT" },
];

const ExampleComponent = React.createClass({
  render: function () {
    const infoData = this.props.info;
    return (
      <div>
        {infoData.map((object, i) => {
          return (
            <div className={"row"} key={i}>
              {[
                object.name,
                // remove the key
                <b className="fosfo" key={i}>
                  {" "}
                  {object.city}{" "}
                </b>,
                object.age,
              ]}
            </div>
          );
        })}
      </div>
    );
  },
});

React.render(<ExampleComponent info={data} />, document.body);

下面由@Chris发布的答案比这个答案更详细。

React文档中关于按键在协调中的重要性:按键

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

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

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