Javascript React中es6类的关键道具

我正在浏览关于React的pluralsight教程（课程是前一段时间制作的），所以有些东西有点过时，比如Babel。然而，我遇到了一些我不确定的事情。我在浏览器控制台中收到以下消息：

警告：数组或迭代器中的每个子级都应具有唯一的“键”属性。检查

App

的渲染方法

提前谢谢

下面是我的应用程序组件：

import React from 'react';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      messages: [
        'hi there, how are you?',
        'I am fine, and you?'
      ]
    };
  }

  render() {
    var messageNodes = this.state.messages.map(message => {
      return (
        <div>{message}</div>
      );
    });

    return (
      <div>{messageNodes}</div>
    );
  }
}

export default App;

从“React”导入React；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
信息：[
“你好，你好吗？”，
“我很好，你呢？”
]
};
}
render（）{
var messageNodes=this.state.messages.map（message=>{
返回(
{message}
);
});
返回(
{messageNodes}
);
}
}
导出默认应用程序；

每个可重复项目都需要某种唯一标识符（从提高性能的角度来看需要）

在下面的例子中，您可以只添加一个数组的索引作为键，但是随着应用程序变大，您可能希望为这些消息提供某种id（可能来自数据库或类似数据库）

---

这就清楚了，而且很有意义！非常感谢。如果您从未删除或添加除数组末尾之外的项，并且从未对数组排序，则使用索引作为id是可以的。也就是说，它是脆弱的。100%的人同意——但给定给定的数据输入，Jose可以使用它或消息本身——两者都是脆弱的。我建议，作为我在底部的扩展答案的一部分，让id来自持久性层。其中一个可能也会有帮助：。在提出新问题之前，请使用搜索。这应该澄清很多：。

import React from 'react';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      messages: [
        'hi there, how are you?',
        'I am fine, and you?'
      ]
    };
  }

  render() {
    var messageNodes = this.state.messages.map(message, index => {
      return (
        <div key={index}>{message}</div>
      );
    });

    return (
      <div>{messageNodes}</div>
    );
  }
}

export default App;

messages: [
    { id: 234, text: "Hi there, how are you?" }, 
]