我遇到这个错误消息，因为<></>被返回数组中的一些项目，而不是null需要返回。

If you are getting error like :

> index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Home`. See https://reactjs.org/link/warning-keys for more information.

Then Use inside map function like:

  {classes.map((user, index) => (
              <Card  **key={user.id}**></Card>
  ))}`enter code here`

var TableRowItem = React.createClass({
  render: function() {

    var td = function() {
        return this.props.columns.map(function(c, i) {
          return <td key={i}>{this.props.data[c]}</td>;
        }, this);
      }.bind(this);

    return (
      <tr>{ td(this.props.item) }</tr>
    )
  }
});

这样问题就解决了。

一个直观的解释。

(数组的)key=index的错误方式

正如你所看到的，标签3、标签2和标签1都被重新渲染了(在元素面板中闪烁)。

正确的方法是key=uniqueId

只有顶部的新元素会闪烁(重新渲染)。

警告:数组或迭代器中的每个子元素都应该有一个唯一的“key”道具。

这是一个警告，因为我们要迭代的数组项需要一个唯一的相似性。

React将迭代组件渲染处理为数组。

更好的解决方法是为你要遍历的数组项提供索引。例如:

class UsersState extends Component
    {
        state = {
            users: [
                {name:"shashank", age:20},
                {name:"vardan", age:30},
                {name:"somya", age:40}
            ]
        }
    render()
        {
            return(
                    <div>
                        {
                            this.state.users.map((user, index)=>{
                                return <UserState key={index} age={user.age}>{user.name}</UserState>
                            })
                        }
                    </div>
                )
        }

index是React内置的道具。

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

import { v4 as uuid } from "uuid";

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