コンポーネントのレンダリングに関する警告が表示されます

Question

親コンポーネント内の子コンポーネントを使用しています。 、以下のようなコードの上

class Parent extends Component() { 
    getContent() { 
    let arr = [{name: 'abc'},{name: 'bcd'},{name: 'cde'}]; 
    return arr.map(data => <Child name={data.name}/>) 
    } 

    render() { 
    return (
     <div>{this.getContent()}</div> 
    ) 
    } 
} 

は、ユニークな「キー」小道具を持っている必要があり

配列の各子供を警告与えます。 は私がのような答えが子コンポーネントで小道具として一意のキーを使用したくないTableComponent

のrenderメソッドを確認してください。代わりに、私がここにユニークなキーを使用しないと、反応がそのようなタイプの警告を与える理由を明確にしてください。この原因の例を示してください。

Answer 1

キーヘルプ変更、追加、削除されたアイテムを特定します。要素を安定したアイデンティティにするために、配列内の要素にキーを渡す必要があります。