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

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

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

这样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文档中关于按键在协调中的重要性:按键

当你对呈现的项目没有稳定的id时，你可以使用项目索引作为关键字作为最后的手段:

const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
   <li key={index}>
      {todo.text}
   </li>
);

请参考列表和键-反应

这是一个简单的例子，我使用了一个react条件&&先映射，在我已经添加了用户id键，以确保它是唯一的

 <tbody>
                                    {users &&
                                    users.map((user) => {
                                        return <tr key={user._id}>
                                            <td>{user.username}</td>
                                            <td><input
                                                name="isGoing"
                                                type="checkbox"
                                                checked={user.isEnabled}
                                                onChange={handleInputChangeNew}/></td>
                                            <td>{user.role.roleTitle} - {user.role.department.departmentName}</td>
                                            {/*<td className="text-right">
                                                    <Button>
                                                        ACTION
                                                    </Button>
                                                </td>*/}
                                        </tr>
                                    })
                                    }


                                    </tbody>

我也遇到过类似的问题，但不确切。尝试了所有可能的解决方案，都无法摆脱这个错误

数组中的每个子元素都应该有一个唯一的“key”道具。

然后我尝试在不同的本地主机上打开它。我不知道怎么回事，但它奏效了!

下面是React文档，它们很好地解释了Key属性的使用，Key应该在父组件中定义，不应该在子组件中使用。反应文档