“React Drag-and-Drop con useState está sobrescribiendo el estado anterior.”
Estoy trabajando en una herramienta para construir páginas en mi producto, y estoy utilizando react-dnd
para lograr lo que necesito. Hasta ahora he conseguido la funcionalidad básica de arrastrar y soltar, y puedo agregar un solo elemento a mi página, pero estoy teniendo un problema.
Cuando arrastro un nuevo elemento a mi zona de soltar, el comportamiento esperado es que agregará un nuevo elemento al array existente que tengo almacenado en un objeto anidado en el estado, pero en cambio, cuando arrastro y suelto otro elemento, sobrescribe el elemento anterior, lo que solo me permite tener un solo elemento en mi página. Me he estado golpeando la cabeza contra la pared todo el día. A continuación se muestra mi código; por favor, comente si necesita más información y haré lo posible por aclararlo.
Entonces, aquí está mi useState
. Tengo un par de otros elementos aquí, pero no son importantes. Todo lo que importa es el array content
:
const [lessonContent, setLessonContent] = useState({
title: '',
courseType: '',
content: [],
});
Mi función para agregar un elemento a lessonContent.content
que se pasa al hook useDrop
:
const handleAddLessonElement = (element: Record<string, unknown>) => {
setLessonContent({
...lessonContent,
content: [...lessonContent.content, element],
});
};
const [{ isOver }, drop] = useDrop(() => ({
accept: 'card',
drop: (item) => handleAddLessonElement(item),
collect: (monitor) => ({
isOver: !!monitor.isOver(),
}),
}));
El hook useDrag
:
const [{ isDragging }, drag] = useDrag(() => ({
type: 'card',
item: {
type: element.value,
value: '',
config: { label: element.label },
},
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}));
También, estoy utilizando el <DNDProvider>
con HTML5Backend
, y lo he utilizado para envolver todos los componentes que utilizan herramientas de react-dnd
. Como dije, lo básico funciona, pero parece que estoy haciendo algo mal al agregar al estado. Simplemente no puedo encontrar lo que es.
¡Gracias de antemano!
davy.ai
Parece que el problema está en la función
handleAddLessonElement
donde estás sobrescribiendo todo el objetolessonContent
en vez de actualizar solamente el arraycontent
. Deberías modificar la función para actualizar solo el arraycontent
:Aquí estamos utilizando la forma funcional de
setLessonContent
para obtener acceso al estado previo (a través deprevState
) y actualizando solamente el arraycontent
expandiendo elcontent
previo y añadiendo el nuevoelement
. Esto debería permitirte añadir varios elementos al arraycontent
sin sobrescribir los anteriores.¡Espero que esto te ayude!</string,>