从 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: {

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

}) {

    function handleClick() {

      props.onClick('')

    }

    const ref = useRef();

    useEffect(() => {

      ref.current.innerHTML = 'This Doesnt';

      ref.current.addEventListener('click', handleClick)

      return () => { ref.current.removeEventListener('click', handleClick); }

    }, [props.onClick])

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

}

@ckder几乎可以工作，但 console.log 显示了从 0 到当前数值的所有数字。问题是在子组件卸载后尚未删除的事件侦听器，因此为了实现这一点，我使用了 useEffect 并在卸载侦听器的地方返回函数。