React useState 会在开发工具中更新，但不会在控制台中更新

Question

嘿我有这个功能

   const [mouseIsDown, setMouseDown] = useState(true);

   function handleMouseUp() {
        console.log('mouseUp')
        console.log(mouseIsDown)
        setMouseDown(false);
        setInterval(() => {
            console.log(mouseIsDown)
        }, 1000)

    }

当它被触发时，它会记录：

- mouseUp
- true
- true
- true
- true
- true
...

但是反应开发工具显示 mouseIsDown 实际上是错误的，但是当我在一个时间间隔内记录它的值时，当我设置 [=20= 的值时它仍然记录 true ]mouseIsDown 到 false.

我不知道为什么会这样，欢迎任何帮助:D

Answer 1

原因是这一行

setInterval(() => {
     console.log(mouseIsDown)
}, 1000)

当你这样使用间隔时，函数内部就像是当前状态的“快照”。这就是为什么你总是得到起始 mouseIsDown 值。

为了解决这个问题，你需要使用useRef作为参考值，所以这将保存间隔内的当前状态。

新代码：

const [mouseIsDown, setMouseDown] = useState(true);
const mouseIsDownRef = useRef();
mouseIsDownRef.current = mouseIsDown; //this will set the current value

function handleMouseUp() {
        console.log('mouseUp')
        console.log(mouseIsDown)
        setMouseDown(false);
        setInterval(() => {
            console.log(mouseIsDownRef?.current)
        }, 1000)

    }

React useState 会在开发工具中更新，但不会在控制台中更新

React useState does update in dev tools but not in the console

reactjs

use-state