es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

“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!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Parece que el problema está en la función handleAddLessonElement donde estás sobrescribiendo todo el objeto lessonContent en vez de actualizar solamente el array content. Deberías modificar la función para actualizar solo el array content:

    const handleAddLessonElement = (element: Record<string, unknown="">) => {
      setLessonContent(prevState => ({
        ...prevState,
        content: [...prevState.content, element],
      }));
    };
    

    Aquí estamos utilizando la forma funcional de setLessonContent para obtener acceso al estado previo (a través de prevState) y actualizando solamente el array content expandiendo el content previo y añadiendo el nuevo element. Esto debería permitirte añadir varios elementos al array content sin sobrescribir los anteriores.

    ¡Espero que esto te ayude!</string,>

Comments are closed.