从 prop 事件处理程序设置时，React 状态会重置

Question

我一生都无法弄清楚发生了什么，但是出于某种原因，当单击“单击我”时，数字会按您的预期增加。当子组件触发单击时，它会重置状态并始终打印 0。

function Child(props: {

    onClick?: (id: string) => void,

}) {

    const ref = useCallback((ref) => {

        ref.innerHTML = 'This Doesnt';

        ref.addEventListener('click',() => {

            props.onClick!('')

        })

    }, [])

    return (<div ref={ref}></div>)

}

function Parent() {

  const [number, setNumber] = useState(0);

  return <div>

            <div onClick={() => {

                setNumber(number + 1);

                console.log(number);

            }}>

                This Works

            </div>

            <Child

                onClick={(id) => {

                    setNumber(number + 1);

                    console.log(number);;

                }}

            />

        </div>

}

这是问题的演示：https : //jscomplete.com/playground/s333177

Answer 1

function Child(props: {&nbsp; &nbsp; onClick?: (id: string) => void,}) {&nbsp; &nbsp; function handleClick() {&nbsp; &nbsp; &nbsp; props.onClick('')&nbsp; &nbsp; }&nbsp; &nbsp; const ref = useRef();&nbsp; &nbsp; useEffect(() => {&nbsp; &nbsp; &nbsp; ref.current.innerHTML = 'This Doesnt';&nbsp; &nbsp; &nbsp; ref.current.addEventListener('click', handleClick)&nbsp; &nbsp; &nbsp; return () => { ref.current.removeEventListener('click', handleClick); }&nbsp; &nbsp; }, [props.onClick])&nbsp; &nbsp; return (<div ref={ref}></div>)}@ckder几乎可以工作，但 console.log 显示了从 0 到当前数值的所有数字。问题是在子组件卸载后尚未删除的事件侦听器，因此为了实现这一点，我使用了 useEffect 并在卸载侦听器的地方返回函数。