Entonces, estoy tratando de hacer una lista de tareas y no funciona cuando intento agregar un elemento a la lista con addItemToList . Estoy recibiendo este error:
Each child in a list should have a unique “key” propCódigo de la aplicación:
function App() { const [currentItem, setCurrentItem] = useState(""); const [itemlist, updateItemList] = useState([]); const onChangeHandler = (e) => { setCurrentItem(e.target.value); }; const addItemToList = () => { updateItemList([...itemlist, { item: currentItem, key: Date.now() }]); setCurrentItem(""); }; return ( <div className="App"> <header> <form id="to-do-form"> <input type="text" placeholder="Enter Text" value={currentItem} onChange={onChangeHandler} /> <button onClick={addItemToList} type="submit"> Add </button> </form> <List itemlist={itemlist} />{" "} </header> </div> ); }Código de lista:
function List(props) { return ( <div> {props.itemlist.map((itemObj) => { return <p>{itemObj.item}</p>; })} </div> ); }Asegúrese de que cada elemento dentro de la matriz devuelta por el
maptenga una propiedad de clave única.
Dado que cada objeto de elemento en su caso ya tiene una propiedad clave igual a Date.now() , podría usarlo, así:
function List(props) { return ( <div> {props.itemlist.map((itemObj) => { return <p key={itemObj.key}>{itemObj.item}</p>; })} </div> ); } Si no tiene un accesorio clave en sus artículos, puede usar index from map , así:
function List(props) { return ( <div> {props.itemlist.map((itemObj, index) => { return <p key={index}>{itemObj.item}</p>; })} </div> ); } Está desapareciendo porque la página se actualiza cuando envía el formulario. Debe evitar ese comportamiento cambiando addItemToList de esta manera:
const addItemToList = (e) => { e.preventDefault(); updateItemList([...itemlist, { item: currentItem, key: Date.now() }]); setCurrentItem(""); };Probablemente tenga un itemlist.map que transforma esta matriz en un elemento jsx para representar.
Este elemento necesita una clave única, es un accesorio que ayuda a reaccionar para representar su lista correctamente.
Entonces, puede pasar este apoyo después de mapear esta lista {itemlist.map(item => <element key={item.UNIQUE_KEY} />)}
Si no tiene una clave única, puede pasar el índice de su mapa, pero no se recomienda porque si modifica esta lista, React volverá a calcular todos esos índices nuevamente.
{itemlist.map((item, index) => <element key={index} />)}
Esta pregunta es recurrente y ha sido respondida varias veces. Asegúrese de usar la búsqueda con anticipación antes de publicar preguntas para asegurarse de que su pregunta no esté duplicada.
Pero aquí tienes:
como el error
Advertencia: cada niño en una lista debe tener un accesorio de "clave" único.
estados, React requiere que los niños en una matriz tengan una identidad estable que le permita a React identificar qué elementos se han cambiado, agregado o eliminado durante el ciclo de vida del componente. La identidad se asigna a los componentes con la key prop. Los documentos son muy claros al respecto. De hecho, se recomienda utilizar una cadena que sea única entre todos los hermanos de la lista.
Suponiendo que los elementos tienen nombres únicos, por ejemplo, item1 y item2 , podría hacer algo similar para usarlos como claves de componentes al renderizar:
function App(){ const [currentItem, setCurrentItem] = useState("") const [itemlist, updateItemList] = useState([]) const onChangeHandler = e => { setCurrentItem(e.target.value) }; const addItemToList = () =>{ updateItemList([...itemlist, {item: currentItem, key: Date.now()}]) setCurrentItem(""); }; return itemlist.map((item) => <p key={item.name} />) }