Aquí tengo esta aplicación en la que estoy trabajando que genera notas de lo que escribo y agrego en el área de creación. Probé el mapeo anidado usando el siguiente código que genera 3 notas (previstas) con cada clic de agregar.
import React, { useState } from "react"; import Header from "./Header"; import Footer from "./Footer"; import Note from "./Note"; import CreateArea from "./CreateArea"; function App() { const [notes, setNotes] = useState([]); function addNote(newNote) { setNotes(prevNotes => { return [...prevNotes, newNote]; }); } function deleteNote(id) { setNotes(prevNotes => { return prevNotes.filter((noteItem, index) => { return index !== id; }); }); } return ( <div> <Header /> <CreateArea onAdd={addNote} /> {notes.map((noteItem, index) => { return ( <React.Fragment> <Note key={index} id={index} title={noteItem.title} content={noteItem.content} onDelete={deleteNote} /> {notes.map((noteItem, index) => { return (<> <Note onAdd={addNote} key={index} id={index} title={noteItem.title} content={noteItem.content} onDelete={deleteNote} /> {notes.map((noteItem, index) => { return ( <Note key={index} id={index} title={noteItem.title} content={noteItem.content} onDelete={deleteNote} /> ); })}</> ); })} </React.Fragment>); })} <Footer /> </div> ); } export default App;el problema es que cuando presiono agregar nuevamente (segunda vez después de agregar 3 notas) en lugar de agregar 3 notas, agrega como 11 notas nuevas (algunas nuevas y algunas de las anteriores agregadas nuevamente). puede probarlo copiando el código anterior en App.jsx en este enlace. https://codesandbox.io/s/keeper-part-3-completed-forked-8zs84v?file=/src/components/App.jsx:0-1628
Quiero que agregue solo 3 notas con un solo clic. (Los componentes deben estar anidados como se muestra) Estoy tratando de agregar una condición if para dejar de representar esos múltiples componentes adicionales, pero estoy atascado.
El problema es que estás anidando dentro de cada .map . Entonces, cuando esté en el primer .map y esté representando el primer elemento, ese segundo .map ahora pasará por todos los elementos que están contenidos en las notes y representará cada elemento. Esto sucederá con cada .map anidado que tenga.
Repasemos cuál sería su primera ejecución a través del primer elemento si las notes contuvieran 2 elementos:
Notes .Notes , Note para el primer elemento y el segundo elemento.Notes . Uno para el primer elemento y otro para el segundo elemento CUANDO el Mapa 2 está en su primer elemento. Cuando el Mapa 2 está en su segundo elemento, volverá a representar un componente de Notes para el primer y el segundo elemento de las notes . Entonces, en total, habría representado el primer elemento 4 veces y el segundo elemento 3 veces para un total de 7 elementos en la página cuando el Mapa 1 está solo en su primer elemento. Volvería a ejecutar todo esto cuando el Mapa 1 se represente para el segundo elemento; lo que debería generar 14 componentes de Notes .
Para cumplir con su pedido de solo representar 3 elementos, agregaría elementos adicionales a la fuerza a su función setNotes :
setNotes(prevNotes => { return [...prevNotes, newNote, newNote, newNote]; }); pero si quisieras mantener eso puro, simplemente podrías anidar tus .map para que sean independientes.
Si necesita que estén anidados, entonces deberá comparar los índices en cada nivel de .map
{notes.map((noteItem, indexOne) => { return ( <React.Fragment> <Note key={indexOne} id={indexOne} title={noteItem.title} content={noteItem.content} onDelete={deleteNote} /> {notes.map((noteItem, indexTwo) => { return ( <> { indexOne === indexTwo ? <Note onAdd={addNote} key={indexTwo} id={indexTwo} title={noteItem.title} content={noteItem.content} onDelete={deleteNote} /> : '' } {notes.map((noteItem, indexThree) => { return ( indexOne === indexThree && indexTwo === indexThree ? <Note key={indexThree} id={indexThree} title={noteItem.title} content={noteItem.content} onDelete={deleteNote} /> : '' ); })} </> ); })} </React.Fragment>); })}