从 prop 事件处理程序设置时，React state 重置

Question

我一生都无法弄清楚发生了什么，但是由于某种原因，当单击“单击我”时，数字会按您的预期增加。 当子组件触发点击时，它会重置 state 并始终打印 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

父组件中的onClick处理程序在每次渲染时都会重新创建，这是正确的，因为它们在number state 字段上有一个闭包。

问题是，发送给子组件的onClick属性在ref回调中使用，由于依赖列表为空，因此仅在初始渲染时才反应。 因此，Child 在后续渲染中收到的onClick道具根本不会被使用。

尝试通过删除依赖项参数或在依赖项列表中发送 props.onClick 来解决此错误，由于文档中提到的警告，我们遇到了问题。 https://reactjs.org/docs/refs-and-the-dom.html

因此，您添加了 null 处理，您会看到更新的回调现在被调用，但是......所有早期的回调也被调用，因为我们没有删除那些事件侦听器。

const ref = useCallback((ref) => {
    if(!ref) return;
    ref.innerHTML = 'This Doesnt';
    ref.addEventListener('click',() => {
        props.onClick!('')
    })
}, [props.onClick])

我相信这只是作为学习钩子的一部分进行的实验，否则不需要 go 以迂回的方式从 ref 回调中调用onClick 。 只需将其作为道具传递给div 。

编辑：
根据您的评论，这不仅仅是一个实验，而是简化了一些需要通过addEventListener设置点击处理程序的真正要求，这是一个可能的解决方案：

const ref = useRef(null);
useEffect(() => {
    if(!ref.current) return;
    ref.current.innerHTML = 'This Doesnt';
    const onClick = () => props.onClick!('');
    ref.current.addEventListener('click',onClick)

    // return the cleanup function to remove the click handler, which will be called before this effect is run next time.
    return () => {ref.current.removeEventListener("click", onClick)}
}, [ref.current, props.onClick]);

基本上，我们需要使用useEffect以便我们有机会在添加新侦听器之前删除旧侦听器。

希望这可以帮助。

Answer 2

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 并返回 function 我卸载侦听器的位置。