React JS：警告：数组或迭代器中的每个子代都应具有唯一的“键”属性

Question

I'm having some trouble while learning ReactJs. I keep having this warning :

Warning: Each child in an array or iterator should have a unique "key" prop.

What loses me is that I did gave a unique key to each of my elements, in that piece of code :

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

My TodoListItems are <li> elements, I also tried to give them a key then I tested the existence and the value of {t.id} before giving it as a key and it's ok. I also cleared the cache before every execution.

I'm out of solutions, that's why I'm asking for your help.

Thank you in advance.

Answer 1

The Safest way to enforce a unique key is to use the index parameter of your map function.

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

If you truly want to use your t.id as the key, I would suggest temporarily changing your code to use the index (per above snippet), but dumping out your t.id in your rendered markup to validate that your id's are, in fact, unique.