reactjsの警告を修正する方法：配列内の各子には一意の小道が必要です...？

Question

私はreactjsアプリを実行しているし、私のコンソールに警告を取得しています：

警告：配列やイテレータ内の各子供はユニークな「キー」 小道具を持っている必要があります。 AppointmentsContainer

のレンダリング方法を確認してください私のコンポーネントは次のようになります。

export default class AppointmentsContainer extends Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     //todo remove 
     //debugger; 

     let appointments = mockData.data; 

     return (
      <div> 
       //loop through the appointments 
       {appointments.map(function(a,i){ 
        //todo remove 
        //console.log('testing=a', a); 
        return <p><Appointment key={i}/></p> 
       })} 
      </div> 
     ); 
    } 
} 

私は今、キーを渡していますが、それでも警告がアップしますか！これをどうすれば解決できますか？

Answer 1

Appointmentの代わりにp要素にキーを配置する必要があります。 Appointmentはpの唯一の子であるため、キーは必要ありません。

Answer 2

キーは余分な機能を実行することはありませんが、それでもあなたは

return <p key={i}><Appointment/></p> 

それとも、

<div> 

       //loop through the appointments 
       {appointments.map(function(a,i){ 
        //todo remove 
        //console.log('testing=a', a); 
        return <Appointment key={i}/> 
       })} 

      </div> 

そして予定でにコードを変更保つことができるとあなたのコードを置き換えることができ、警告を削除するために追加しますあなたはそれにアクセスすることができますコンポーネント

<div> 
<p>{this.props}</p> 
</div>