Question

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

警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;支柱。检查.vs的渲染方法。

提前致谢。

以下是我的App组件：

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?" }, 
]

在React中使用es6类的关键支柱

1 个答案: