Estoy usando react-dnd , al soltar quiero enviar una acción con el valor de estado local actualizado. Estoy actualizando el estado en el método de desplazamiento proporcionado por useDrop hooks. Problema : el estado se actualiza al pasar el mouse, pero cuando se llama al método de eliminación, el valor del estado es siempre el estado inicial. He intentado replicar el problema tomando un ejemplo directamente de los ejemplos de documentos de reacción. Enlace a codesandbox con el problema al que me enfrento .

Cubo de basura.jsx

 export const Dustbin = () => { const [test, setTest] = useState(false); const [{ canDrop, isOver }, drop] = useDrop(() => ({ accept: ItemTypes.BOX, hover: () => { setTest(true); }, drop: () => { console.log(test, "drop"); return { name: "Dustbin" }; }, collect: (monitor) => ({ isOver: monitor.isOver(), canDrop: monitor.canDrop() }) })); const isActive = canDrop && isOver; let backgroundColor = "#222"; if (isActive) { backgroundColor = "darkgreen"; } else if (canDrop) { backgroundColor = "darkkhaki"; } console.log(test, "render"); return ( <div ref={drop} role={"Dustbin"} style={{ ...style, backgroundColor }}> {isActive ? "Release to drop" : "Drag a box here"} </div> ); };

Como puede ver, tengo el estado con el nombre de prueba con el valor inicial como falso y estoy actualizando el estado en el método de desplazamiento. Se está actualizando, pero en el método de eliminación puede ver el archivo console.log para la prueba, que siempre es falso (su estado inicial).

Resultado esperado : en el método de caída, el valor de la prueba debe ser verdadero.

Gracias por la ayuda, muy apreciada.