배열 또는 반복기의 각 자식은 react.js를 사용하여 아래 코드에

Question

이라는 경고 메시지 ()를 가져 오는 고유 한 "키"소품이 있어야합니다. stackoverflow에 대한 응답을 확인하고 경고 메시지를 제거하려고했지만 도움이되지 않았습니다. 정적 페이지에서 비슷한 기능을 가진 별도의 예제를 만들었으며 정상적으로 작동합니다. 그러나이 코드는 경고 메시지를 던지고 있습니다. 이 경고 메시지를 제거하는 방법?

<tbody> 
     {list.map(function(value){ 
      return(<tr className="gradeA" role="row"> 
         <td className="sorting_1">{ value.id }</td> 
         <td>{value.name}</td>       
         <td>{value.location}</td> 
        </tr>);           
      }) 
     }  
</tbody> 

Answer 1

지도에서 반환 된 구성 요소에 고유 키를 추가하기 만하면됩니다. 귀하의지도 함수에서 키로 다른 매개 변수를 정의하고 각각 tr에 대한 반환 그냥 key={key} 소품으로 추가하십시오.

<tbody> 
     {list.map(function(value, key){ 
      return(<tr className="gradeA" role="row" key={key}> 
         <td className="sorting_1">{ value.id }</td> 
         <td>{value.name}</td>       
         <td>{value.location}</td> 
        </tr>);           
      }) 
     }  
</tbody>