"배열의 각 하위 페이지에는 고유 한 키가 있어야합니다."페이지의 처음 렌더링시에만

Question

<tr>은 <td> 묶음으로 구성되며 그 안쪽에 Instagram을 통해 로그인 한 모든 사용자로 구성됩니다. <tr>에는 고유 키가 제공되며 처음 페이지를로드 할 때 고유 키가없는 각 아이에게 경고 메시지가 표시됩니다. 그러나 해당 페이지에서 다른 곳으로 이동하거나 계정을 삭제하거나 Instagram을 통해 다시 로그인하여 테이블의 계정을 나열하면 경고가 더 이상 나타나지 않습니다. 왜 이런 일이 생길까요? 각 키 <tr>에 다른 키가 있는지 확인하기 위해 기록한 콘솔이므로 키가 고유하다는 것을 99 % 확신합니다.

경고 : 배열의 각 하위에는 고유 한 "키"소품이 있어야합니다. 를 사용하여 renderComponent 호출을 확인하십시오.

그것의 경고가 콘솔에서 오는 어디를 추적 할 수 안됐다 ...

샘플 코드 : 당신은 당신이 키 속성을 추가 할 필요가

component1 = React.createClass({ 
    render:() -> 
     # A lot of table stuff here 
     _.chain(@state.users).map((x) -> <component2 profile={x} />),@).value() 
)} 

component2 = React.createClass({ 
    render:() -> 
     return (
      <tr key={@props.profile.id} 
       <td>Blah</td> 
       <td>Blah</td> 
       <td>Blah</td> 
      </tr> 
     ) 
}) 

Answer 1