Tengo un componente con un método para agregar/crear un nuevo subcomponente e insertarlo en una matriz en un índice específico (es decir, [elem1, elem2, elem3] se convierte en [elem1, elem2, new elem, elem3]).

Cuando se usa algo como array.splice(currentIndex + 1, 0, newElement), en el DOM, el último elemento que ya existe simplemente se duplica, aunque parece actualizarse correctamente para el estado de la matriz.

La única forma en que he encontrado que funciona es simplemente usar array.push(newElement), que se procesa correctamente pero no es el efecto deseado. He intentado algunas formas más de insertar el nuevo elemento en la matriz, pero hasta ahora todo lo que no sea .push() causa el problema de duplicación. ¡Cualquier sugerencia o consejo sería muy apreciado!

 const Notef = ({ fetchedParts }) => { const [parts, setParts] = useState(fetchedParts); const addNewPart = (currentPart) => { const index = parts.map((p) => p.id).indexOf(currentPart.id); const updatedParts = [...parts]; const newPart = { id: pid(), html: 'Type here...', tag: 'p' } // This will cause duplicated element updatedParts.splice(index + 1, 0, newPart); // This does not create duplicate //updatedParts.push(newPart); setParts(updatedParts); } return ( <> {parts.map((part) => { const position = parts.map((p) => p.id).indexOf(part.id) + 1; return ( <Part key={part.id} position={position} id={part.id} tag={part.tag} html={part.html} addPart={addNewPart} /> ); })} </> ); } export default Notef;

Duplicación de elementos con .splice()

Adición de elementos con .push()

editar: introducción reformulada para especificar un nuevo elemento que se insertará en lugar de reemplazarlo.