React useState обновляется в инструментах разработки, но не в консоли
Привет у меня есть эта функция
const [mouseIsDown, setMouseDown] = useState(true);
function handleMouseUp() {
console.info('mouseUp')
console.info(mouseIsDown)
setMouseDown(false);
setInterval(() => {
console.info(mouseIsDown)
}, 1000)
}
и когда он срабатывает, он регистрирует:
- mouseUp
- true
- true
- true
- true
- true
...
Но инструменты разработчика реакции показывают, что mouseIsDown на самом деле является ложным, но когда я регистрирую его значение в интервале, он все равно регистрирует истинный, когда я устанавливаю значение мышьIsDown в ЛОЖЬ.
Я понятия не имею, почему это так, любая помощь приветствуется: D
Ответы 1
Причина в этой строке
setInterval(() => {
console.info(mouseIsDown)
}, 1000)
когда вы используете такой интервал, внутренняя часть функции похожа на «моментальный снимок» текущего состояния. вот почему вы всегда получаете начальное значение mouseIsDown.
чтобы исправить это, вам нужно использовать useRef в качестве эталонного значения, чтобы сохранить текущее состояние внутри интервала.
новый код:
const [mouseIsDown, setMouseDown] = useState(true);
const mouseIsDownRef = useRef();
mouseIsDownRef.current = mouseIsDown; //this will set the current value
function handleMouseUp() {
console.info('mouseUp')
console.info(mouseIsDown)
setMouseDown(false);
setInterval(() => {
console.info(mouseIsDownRef?.current)
}, 1000)
}
Это работает :D, но могу я спросить, что за ? делает в console.info(mouseIsDownRef**?**
здорово :) -- это сокращение от этого -> imouseIsDownRef.current ? imouseIsDownRef.current : null
setMouseDownна самом деле не меняет значениеmouseIsDown. Он применяется асинхронно, и вы не увидите отраженного изменения, пока функция вашего компонента не будет вызвана снова и снова не вызовет useState.