React开发Chrome扩展：消息触发状态更新失效问题求助

我用React开发Chrome扩展，按钮点击触发状态更新切换页面功能正常，但通过Content Script传入的消息触发时状态更新失效：

• 收到消息希望切换到About页面时，即便手动切换到了Account页面，currentPage仍显示默认的Home
• 直接调用setCurrentPage设置为About无效，但在接收消息时模拟按钮点击（button.click()）却能正常切换页面

简化后的代码如下：

function App() {
    const [currentPage, setCurrentPage] = useState(PageTypes.Home.toString());
    let sidePanelScriptHelper: SidePanelScriptHelper | null = null;

    function loadActiveTabText() {
        debug("loadActiveTabText - on page " + currentPage);
        if (currentPage !== PageTypes.Home.toString()) {
            setCounter(counter + 1);
            setCurrentPage(PageTypes.Home.toString());
            debug("Switch to HOME");
        }
    }

    function handleIncomingMessage(message: ExtMessage) {
        debug('sidepanel received message:')
        loadActiveTabText();

        // var importButton = document.getElementById("button");
        // importButton!.click(); this works
    }

    sidePanelScriptHelper = SidePanelScriptHelper.getInstance(handleIncomingMessage);

    return (
        <>
            ...
            <div className="d-flex" id="wrapper">
                <div id="main">
                    <div className="container py-3">
                        {(() => {
                            if (currentPage == PageTypes.About.toString()) {
                                return <About />;
                            } else if (currentPage == PageTypes.Account.toString()) {
                                return <Account />;
                            } else {
                                return <Home />;
                            }
                        })()}
                    </div>
                </div>
                <div id="nav">
                    <Navigation pageSwitcher={onPageChange} isLoggedIn={loggedIn} currentPage={currentPage} />
                </div>
            </div>
        </>
    )
};
export default App

问题原因 #

核心是闭包捕获旧状态+单例未更新回调的问题：

1. handleIncomingMessage在组件首次渲染时被传递给SidePanelScriptHelper.getInstance，这个函数通过闭包捕获了当时的currentPage（初始值为Home）。
2. 组件后续切换页面触发重新渲染时，会生成新的handleIncomingMessage函数，但SidePanelScriptHelper是单例模式，只会保留第一次传入的旧函数，不会更新为新的回调。
3. 当Content Script发送消息触发旧的handleIncomingMessage时，函数内部访问的currentPage始终是初始的Home值，调用setCurrentPage虽然会触发状态更新，但旧函数本身无法感知新状态；而模拟按钮点击是通过DOM触发组件内绑定的点击事件，该事件能访问到最新的状态和setCurrentPage，所以可以正常切换页面。

解决办法 #

方法1：使用函数式更新获取最新状态 #

修改loadActiveTabText，用函数式更新的方式获取最新的currentPage，不需要依赖闭包中的旧值：

function loadActiveTabText() {
    setCurrentPage(prevPage => {
        debug("loadActiveTabText - on page " + prevPage);
        if (prevPage !== PageTypes.Home.toString()) {
            setCounter(c => c + 1); // 同样用函数式更新counter
            debug("Switch to HOME");
            return PageTypes.Home.toString();
        }
        return prevPage; // 状态不变时返回原状态
    });
}

方法2：用useCallback+useEffect维护回调引用 #

通过useCallback稳定handleIncomingMessage的引用，并在依赖变化时重新传递给SidePanelScriptHelper：

const loadActiveTabText = useCallback(() => {
    debug("loadActiveTabText - on page " + currentPage);
    if (currentPage !== PageTypes.Home.toString()) {
        setCounter(c => c + 1);
        setCurrentPage(PageTypes.Home.toString());
        debug("Switch to HOME");
    }
}, [currentPage]); // 依赖currentPage，状态变化时更新函数

const handleIncomingMessage = useCallback((message: ExtMessage) => {
    debug('sidepanel received message:')
    loadActiveTabText();
}, [loadActiveTabText]); // 依赖loadActiveTabText，确保回调能拿到最新的函数

useEffect(() => {
    sidePanelScriptHelper = SidePanelScriptHelper.getInstance(handleIncomingMessage);
    // 可选：组件卸载时清理回调
    return () => {
        // 如果SidePanelHelper支持移除回调，这里可以处理
    };
}, [handleIncomingMessage]); // 回调变化时重新初始化

这样就能保证SidePanelScriptHelper始终持有能访问最新状态的回调函数，消息触发时状态更新会正常生效。

内容的提问来源于stack exchange，提问作者The MW