为什么计数器在控制台中以不同的值出现两次？ [复制]

Question

我正在试验 React 'ref' 并且正在使用下面的代码 sn-p。

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

const Button = () => {

    const [counter, setCounter] = useState(0)
    const btnRef = useRef();


    useEffect(() => {
        btnRef.current.addEventListener('click', function () {
            console.log('counter ', counter);
            setCounter(counter => 1);
        })
    })

    return (
        <button ref={btnRef}>Click Me</button>
    )
}

export default Button;

我无法理解的是，这段代码 sn-p 每次单击按钮时都会在控制台中两次给我“计数器”值，并且使用不同的值。有人可以帮助我了解这里发生了什么。

当计数器值已经通过 setCounter 函数更改时，为什么计数器值一次又一次地显示“0”？

Answer 1

当您不传递依赖数组时，useEffect 会在包括第一个渲染在内的每个渲染上触发。所以它第一次渲染，然后你调用setCounter，它会触发第二次渲染。您可能正在寻找这个；

 useEffect(() => {
        btnRef.current.addEventListener('click', function () {
            console.log('counter ', counter);
            setCounter(counter => 1);
        })
    },[]) // <-- this is an empty dependency array