React JS : 경고 : 배열이나 반복자의 각 자식은 고유 한 "키"소문이 있어야합니다.

Question

ReactJ를 학습하는 동안 문제가 있습니다. 이 경고가 계속 발생합니다 :

경고 : 배열 또는 반복기의 각 하위에는 고유 한 "키"소품이 있어야합니다.

let tab = props.todos.map((t) => {return <TodoListItem key={t.id} todo={t} onRemove={props.onRemove} /> }) 

가, 나 또한 그들에게 키를 제공하기 위해 노력 <li> 요소가된다 TodoListItems 내 : 나를 잃고 무엇

내가 코드의 조각 내 각 요소에 고유 키를 준 않았다이다 그런 다음 키로 제공하기 전에 {t.id}의 존재와 가치를 테스트 했으므로 괜찮습니다. 또한 모든 실행 전에 캐시를 지 웠습니다.

저는 해결책이 없습니다. 그래서 나는 당신의 도움을 요청하고 있습니다.

미리 감사드립니다.

Answer 1

고유 키를 적용하는 가장 안전한 방법은지도 함수의 index 매개 변수를 사용하는 것입니다.

let tab = props.todos.map((t, index) => {return <TodoListItem key={index} todo={t} onRemove={props.onRemove} /> }) 

당신이 진정으로 키로 t.id를 사용하려는 경우, I (위 조각 당) 인덱스를 사용하도록 코드를 변경 일시적으로 제안,하지만 당신의 렌더링 마크 업에 t.id을 버리는 것 ID가 실제로 고유한지 확인합니다.