javascript - React 中 es6 类的关键 Prop

Question

我正在浏览关于 React 的 pluralsight 教程(类(class)是前一段时间制作的)，所以有些东西有点过时，比如 Babel。但是，我遇到了一些我不确定的事情。我在浏览器控制台中收到此消息:

警告:数组或迭代器中的每个子项都应该有一个唯一的“键” Prop 。检查 App 的渲染方法。

提前致谢。

下面是我的 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;

Answer 1

每个可重复项都需要(在提高性能的意义上需要)某种唯一标识符。

在下面的例子中，您可以只添加数组的索引作为键，但是随着您的应用程序变得越来越大，您可能希望为这些消息提供某种 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?" }, 
]