Necesito guardar la posición del mouse en una matriz para una aplicación, pero las posiciones no se guardan en la matriz, simplemente la reemplazan y no sé por qué, que alguien me ayude, por favor. Aquí está el código :
const mouseXY = async e =>{
setCoords([...coords,{
x:e.clientX,
y:e.clientY
}])
}
useEffect(()=>{
let interval = null;
interval = setInterval(() => {
setTime((prevTime) => prevTime + 0.5);
}, 1000);
window.addEventListener('mousemove', mouseXY);
}
Cuando imprimo me sale esto:
[{x: 379, y: 106}]
Un solo elemento en un Array. Lo que quiero obtener sería algo como esto:
[{x: 379, y: 106},
{x: 379, y: 106},
{x: 379, y: 106},
{x: 379, y: 106},
{x: 379, y: 106},
{x: 379, y: 106},
{x: 379, y: 106}]
con la posición del ratón alrededor de la página.
Es debido a staleState. coords era una matriz vacía en el momento en que se definió mouseXy y se entregó a addEventListener, y siempre será una matriz vacía.
En su lugar, actualice su llamada setCoords para usar el patrón de devolución de llamada.
const mouseXY = (e) => {
setCoords((prevState) => [...prevState, { x: e.clientX, y: e.clientY }]);
};