從 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 我卸載偵聽器的位置。