0
660
ViewsAdvertencia de React Js: cada niño en una lista debe tener un accesorio de "clave" único
Recibí un mensaje de error como el anterior, no entiendo a pesar de que he escrito accesorios clave, ¿qué debo hacer? Adjunto mi código como en la imagen.
3 answers
Answer question0
El problema es que estás configurando la clave en un elemento que no es la raíz del ciclo (el que se repite).
Por lo tanto, deberá colocar la clave en <> de esta manera:
{todos.map( todo => { return { < key={todo.todo_id}> .......Lo cambiaría a un div, pero es mi opinión:
{todos.map( todo => { return { <div key={todo.todo_id}> .......0
Cada elemento en su mapa debe tener una clave única... Simplemente indique que su elemento <>....</> no tiene una clave prop... En su lugar, use un React Fragment como tal <React.Fragment key={todo.todo_id}/>...</React.Fragment> De esa manera, cada elemento (React.Fragment) tiene una clave única (asegúrese de que todo_id sea una clave única). Por supuesto, podría usar un div, pero si no quiere que se represente un div, use React.Fragment.
0
TLDR :
Debería agregar una clave al elemento jsx más externo en la función de devolución de llamada de su mapa. En tu caso este sería el Fragmento (<>). Aquí está la sección en la documentación con algunos ejemplos.
Explicación :
Entonces, ¿por qué React quiere que agregue claves?
React prefiere claves únicas asignadas a cada elemento para que pueda realizar un seguimiento de qué elementos particulares deben actualizarse en el próximo renderizado. Estas claves pueden ayudar a reducir con precisión qué partes del DOM deben actualizarse. Esta es una de las partes increíbles de reaccionar, en lugar de reconstruir todo el árbol DOM en cada renderizado, ¡solo se reconstruirán las partes que cambiaron!
Entonces, ¿qué sucede si no agrego claves?
React no sabrá los elementos particulares que deben actualizarse y se verá obligado a actualizar más cosas de las necesarias.