為什么我沒有在安裝組件時注冊的事件處理程序中獲取最新的道具值？

Question

我正在創建一個 Counter 組件並將計數作為來自父組件的道具傳遞。

安裝 Counter 組件后，我在窗口對象上注冊了一個焦點事件處理程序。

每當窗口獲得焦點時，我都會嘗試在控制台中打印計數道具值。 但是我沒有得到最新的計數道具值，而是得到了初始計數值。

是否發生這種情況是因為每當任何道具發生變化時，都會在內存中創建新的道具對象並傳遞給子組件，並且每當計數道具發生變化時我都不會附加我的事件處理程序，我獲取初始道具（陳舊道具）值，因為 displayCount 函數沒有再次附加到焦點事件並且仍然指向道具對象的舊引用？

如果我錯了，請糾正我。

使用 ref 將起作用。 但我很想知道這種行為背后的原因究竟是什么。

//CounterDisplay.js

 import React, { useEffect, useRef } from 'react'; const CounterDisplay = (props) => { const { count } = props; const countRef = useRef(count); useEffect(() => { window.addEventListener('focus', displayCount); return(() => { window.removeEventListener('focus', displayCount); }); },[]); useEffect(() => { countRef.current = count; },[count]); const displayCount = () => { console.log(" count prop -> "+ props.count); console.log(" countRef -> "+ countRef.current); } return ( <h1>{count}</h1> ); } export default CounterDisplay;

Answer 1

您在第一個 useEffect 的依賴項數組中缺少一個依賴項。 您可以嘗試將代碼重組為類似的內容，看看是否可行。 在當前版本中，您的 useEffect 不會在 props 更改時更新，因為您提供了一個空的依賴項數組。

import React, { useEffect, useRef } from 'react';

const CounterDisplay = (props) => {
    const { count } = props;
    const countRef = useRef(count);

    useEffect(() => {
        const displayCount = () => {
          console.log(" count prop -> "+ count);
          console.log(" countRef -> "+ countRef.current);
        }
    
        window.addEventListener('focus', displayCount);

        return(() => {
            window.removeEventListener('focus', displayCount);

        });
    },[count]);

    useEffect(() => {
        countRef.current = count;
    },[count]);

    return (
        <h1>{count}</h1>
    );
}

Answer 2

您的 useEffect 需要在每次更新計數值后呈現。 所以嘗試使用 [count]