React创建安全Dispatch函数仍遇act测试警告问题求助

你遇到的核心问题是useSafeDispatches钩子的依赖配置错误，导致安全调度逻辑未按预期工作，以下是具体分析和修复方案：

问题根源 #

你的useCallback依赖数组中使用了mounted.current，但useRef的current属性变更不会触发组件重渲染，因此useCallback只会在组件初始挂载时创建一次。错误的依赖配置不仅会触发ESLint异常提示，还可能导致闭包捕获旧值的风险（尽管ref的current是可变属性，但该配置不符合React Hooks的依赖规则）。

修复后的钩子代码 #

export const useSafeDispatches = (...dispatches) => {
    const mounted = useRef(false);
    useLayoutEffect(() => {
        mounted.current = true;
        return () => (mounted.current = false);
    }, []);

    const safeDispatch = useCallback(
        (dispatch) =>
            (...args) =>
                mounted.current ? dispatch(...args) : void 0,
        [] // 移除错误的mounted.current依赖，依赖数组为空即可
    );

    return dispatches.map(safeDispatch);
};

额外注意事项 #

• 确保测试中所有触发状态更新的操作都处于act上下文：React Testing Library的render、fireEvent等API已自动包裹act，但如果手动调用状态更新函数，需要手动用act()包裹。
• 处理异步更新场景：如果组件中有定时器、网络请求等异步操作，需在组件卸载前取消这些任务，避免异步完成后触发无效的dispatch调用。

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