测试在 UI 中更新，但在控制台中不更新，为什么？谁能告诉我为什么控制台没有更新？

Question

基本上我的问题是为什么控制台中的测试状态没有更新？？

import {useEffect, useRef, useState} from "react";

const Home = () => {
    let [test, setTest] = useState(0);
    const ref = useRef(0);

    useEffect(() => {
        setInterval( () => {
            console.log(test, ref);
            ref.current += 1;
             setTest( test =>test + 1);
            console.log(test, ref);
        }, 1000)
    }, [])
    return <>
        <div>
            <h1>a : {test}</h1>
            <h1>ref : {ref.current}</h1>
        </div>
    </>
}

export default Home

enter image description here

Answer 1

这是因为这段代码中的useEffect只执行了一次。 useEffect执行时状态值为0，函数继续记忆这个值。

第一条日志中，执行useEffect时的值为0，所以显示为0。另外，使用setState并不会在同一范围内立即改变值.这就是为什么第二个日志也显示 0.

根据官方文档，通过useRef返回的对象在组件的整个生命周期中得到维护。所以，useRef的值即使在同一个范围内也可以表示不同的值。

测试在 UI 中更新，但在控制台中不更新，为什么？谁能告诉我为什么控制台没有更新？

test is updated in UI but not updating in console why ? can anyone tell about why console is not updating?

setinterval

reactjs