Reactのes6クラスを持つキーの小道

Question

私はRealsについてのpluralsightのチュートリアル（コースは少し前に作られました）を実行していますので、いくつかのものはバベルのように時代遅れです。しかし、私は私が確信している何かに遭遇した。

警告：配列またはイテレータの各子は、一意の「キー」小文字を持つ必要があります。 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?" }, 
]