reactjs 경고를 수정하는 방법 : 배열의 각 자식마다 고유 한 소품이 있어야합니다 ...?

Question

내 reactjs 응용 프로그램을 실행하고 내 콘솔에 경고를 얻고있다 :

경고 : 배열 또는 반복자의 각 아동이 고유의 "키" 소품이 있어야합니다.

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> 
     ); 
    } 
} 

지금 여전히 경고가 온다 키를 전달하고있다 : 내 구성 요소는 다음과 같습니다 AppointmentsContainer

의 렌더링 방법을 확인? 이 문제를 어떻게 해결할 수 있습니까?

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>