Tengo problemas para averiguar por qué mis elementos li no tienen sus claves asignadas en el DOM. Sigo recibiendo el error " Advertencia: cada niño en una lista debe tener un accesorio de 'clave' único " incluso después de proporcionar una clave única.
¡Tengan paciencia conmigo porque todavía estoy aprendiendo! Esto es usando ReactJS.
Este es el componente que usa publicaciones (una variable de estado con una matriz de objetos) y lo itera, devolviendo el componente Publicar cada vez, usando .map(). Cada objeto dentro de la matriz de estado tiene una propiedad de contenido y tipo .
Paso el índice como accesorio:
import React from "react"; import Post from "./Post"; function PostList({ posts, handleDelete }) { const postsLi = posts.map((post, index) => { return ( <Post post={post} postIndex={index} handleDelete={handleDelete} /> ) }) return ( <div className="post-list"> <ul> {postsLi} </ul> </div> ); } export default PostList;Aquí está el componente Publicar:
import React, { useState } from "react"; function Post({ post, postIndex, handleDelete }) { const { content, type } = post; const textContent = (<p key={`a${postIndex}`}>{content}</p>); const urlContent = (<img key={`i${postIndex}`} src={content} />) const finalContent = type === "textarea" ? textContent : urlContent; //Need to figure out why key attribute isn't showing up return ( <li key={`post-${postIndex}`} className="post" > {finalContent} <br /> <button key={`b${postIndex}`} name="delete" onClick={handleDelete} id={postIndex}>Delete</button> </li> ) } export default Post;Leí en otra publicación que todos los niños dentro de un elemento li también deben tener claves, pero eso tampoco funcionó. Post no se considera hermano de PostList, ¿verdad? Además, el elemento del botón tiene correctamente un valor de identificación del índice, por lo que se pasa al componente Publicar sin problemas.
Leí en otra publicación que todos los niños dentro de un elemento li también necesitan tener claves, pero eso tampoco funcionó.
Tal vez hayas leído este artículo: https://sentry.io/answers/unique-key-prop/
Al crear una lista en la interfaz de usuario a partir de una matriz con JSX, debe agregar una propiedad clave para cada elemento secundario y para cualquiera de sus elementos secundarios.
Ej:
<li key="uniqueId1" >Item1</li>React usa la propiedad clave para crear una relación entre el componente y el elemento DOM. La biblioteca utiliza esta relación para determinar si el componente debe volver a renderizarse o no.
No se recomienda utilizar el índice de la matriz como elemento clave si sabe que la matriz no será estática. Si la clave es un índice, el reordenamiento de un elemento en la matriz lo cambia. Entonces React se confundirá y volverá a renderizar el elemento incorrecto.
Las claves no tienen que ser únicas globalmente. Solo necesitan ser únicos entre los elementos hermanos.
En su caso, desea usar el índice como clave key={index} en su elemento Publicar, no está seguro si su matriz no será estática (como se mencionó anteriormente).
const postsLi = posts.map((post, index) => { return ( <Post key={key} post={post} postIndex={index} handleDelete={handleDelete} /> ) })Agregue una clave a esta declaración y creo que solucionaría ese error:
const postsLi = posts.map((post, index) => { return ( <Post key={"some unique key" or index} post={post} postIndex={index} handleDelete={handleDelete} /> ) })