Как обновить положение мыши с помощью useState

avatar
young
9 августа 2021 в 05:33
81
2
0

Я пытаюсь поместить значение позиции мыши в массив и обновить состояние. Если я перестану двигать мышь, массив сбрасывается, поэтому я хочу постоянно хранить все значения с помощью useState.

    const [route, setRoute] = useState("");

    let positionArray = [];

    const getMousePosition = (e) => {
        const position = {
            x: e.offsetX,
            y: e.offsetY,
        }
        positionArray.push(position);

        //setRoute([...positionArray, position])
    }

    useEffect(() => {
        window.addEventListener('mousemove', getMousePosition);
        return () => window.removeEventListener('mousemove', getMousePosition);
    })

Я не знаю, что делать.. или есть идея получше? Спасибо!

Источник
Ayush Gupta
9 августа 2021 в 06:51
1

Лучше установить состояние по умолчанию [] здесь: const [route, setRoute] = useState([]); Это предотвратит любые ошибки, которые могут возникнуть при использовании таких функций, как map

Ответы (2)

avatar
young
9 августа 2021 в 05:46
0

Я решил! это была просто ошибка, я должен был просто

setRoute(route => [...positionArray, ...route]) 
Drew Reese
9 августа 2021 в 06:15
0

При обновлении массивов я бы предложил всегда использовать обновление функционального состояния, чтобы всегда обновлять предыдущее состояние, а не состояние, закрытое в области обратного вызова, т. е. setRoutes(routes => [position, ...routes]);.

young
9 августа 2021 в 06:21
0

Буду иметь в виду, спасибо за ответ!

avatar
Rana Muhammad Usama
9 августа 2021 в 06:36
0

Вы можете напрямую обновить/установить состояние. Нет необходимости в массиве. route.x имеют значение смещения x и route.y имеют значение смещения y.

const [route, setRoute] = useState("");



const getMousePosition = (e) => {
    const position = {
        x: e.offsetX,
        y: e.offsetY,
    }
  

   setRoute(position);
}

useEffect(() => {
    window.addEventListener('mousemove', getMousePosition);
    return () => window.removeEventListener('mousemove', getMousePosition);
})
young
9 августа 2021 в 06:45
1

Спасибо, но если вы сделаете так, вы не сможете сохранить все позиции при перемещении мыши. вы просто обновляете один объект в состоянии маршрута.