React函数组件：表单脏状态下切换视图的确认逻辑实现问题

核心问题分析 #

你遇到的关键痛点是：useEffect清理函数属于组件卸载阶段的回调，此时React已经启动卸载流程，无法中断；而逐个给Tab、菜单等切换事件加确认逻辑，不仅繁琐还容易遗漏新增的切换入口。

正确的思路是在视图切换触发时就拦截检查，而非等组件开始卸载后再处理，同时通过封装统一逻辑实现复用。

解决方案一：基于Context的全局拦截（推荐） #

通过创建Context共享脏表单的确认逻辑，让所有视图切换组件复用同一套检查规则，新增切换入口时无需重复编写确认代码。

1. 封装脏表单拦截Context #

import { createContext, useContext, useState } from 'react';
import { useSelector } from 'react-redux';
// 若直接用Formik状态，可替换为 useFormikContext 获取isDirty
// import { useFormikContext } from 'formik';

const DirtyFormContext = createContext({
  confirmBeforeSwitch: async () => true,
  isDirty: false
});

export const DirtyFormProvider = ({ children }) => {
  // 从Redux获取表单脏状态
  const isFormDirty = useSelector(state => state.form.isDirty);
  // 若用Formik：const { isDirty: isFormDirty } = useFormikContext();
  const [isConfirmed, setIsConfirmed] = useState(false);

  const confirmBeforeSwitch = async () => {
    // 表单未脏或已确认过，直接允许切换
    if (!isFormDirty || isConfirmed) {
      setIsConfirmed(false);
      return true;
    }
    
    const shouldLeave = window.confirm('表单有未保存的更改，确定要离开吗？');
    if (shouldLeave) {
      setIsConfirmed(true);
      // 可选：同步重置Redux/Formik的脏状态
      // dispatch(resetFormDirty());
    }
    return shouldLeave;
  };

  return (
    <DirtyFormContext.Provider value={{ confirmBeforeSwitch, isDirty: isFormDirty }}>
      {children}
    </DirtyFormContext.Provider>
  );
};

export const useDirtyFormGuard = () => useContext(DirtyFormContext);

2. 在视图容器中使用Provider #

将Tab、菜单所在的父容器用DirtyFormProvider包裹，让所有子组件能获取拦截逻辑：

import { DirtyFormProvider, useDirtyFormGuard } from './DirtyFormContext';
import MyFormikForm from './MyFormikForm';

const TabContainer = () => {
  const [activeTab, setActiveTab] = useState('form-tab');
  const { confirmBeforeSwitch } = useDirtyFormGuard();

  const handleTabChange = async (newTab) => {
    const canSwitch = await confirmBeforeSwitch();
    if (canSwitch) {
      setActiveTab(newTab);
    }
  };

  return (
    <DirtyFormProvider>
      <div className="tab-bar">
        <button onClick={() => handleTabChange('tab1')}>Tab 1</button>
        <button onClick={() => handleTabChange('form-tab')}>表单Tab</button>
        <button onClick={() => handleTabChange('tab2')}>Tab 2</button>
      </div>
      <div className="tab-content">
        {activeTab === 'form-tab' && <MyFormikForm />}
        {/* 其他Tab内容 */}
      </div>
    </DirtyFormProvider>
  );
};

3. 菜单组件复用拦截逻辑 #

所有视图切换组件只需调用Context中的confirmBeforeSwitch即可：

import { useDirtyFormGuard } from './DirtyFormContext';

const SideMenu = () => {
  const { confirmBeforeSwitch } = useDirtyFormGuard();

  const handleMenuClick = async (view) => {
    const canSwitch = await confirmBeforeSwitch();
    if (canSwitch) {
      // 执行视图切换逻辑（如切换显示组件）
      switchView(view);
    }
  };

  return (
    <div className="side-menu">
      <button onClick={() => handleMenuClick('dashboard')}>仪表盘</button>
      <button onClick={() => handleMenuClick('form')}>表单页面</button>
      <button onClick={() => handleMenuClick('settings')}>设置</button>
    </div>
  );
};

解决方案二：自定义Hook + 状态提升 #

若项目不适合用Context，可将拦截逻辑封装为自定义Hook，通过状态提升传递给所有切换组件：

import { useState } from 'react';
import { useSelector } from 'react-redux';

export const useDirtyFormGuard = () => {
  const isFormDirty = useSelector(state => state.form.isDirty);
  const [isConfirmed, setIsConfirmed] = useState(false);

  const confirmBeforeSwitch = async () => {
    if (!isFormDirty || isConfirmed) {
      setIsConfirmed(false);
      return true;
    }
    const shouldLeave = window.confirm('表单有未保存的更改，确定要离开吗？');
    if (shouldLeave) setIsConfirmed(true);
    return shouldLeave;
  };

  return { confirmBeforeSwitch, isFormDirty };
};

在父容器中使用Hook，并将confirmBeforeSwitch传递给子组件：

const AppContainer = () => {
  const { confirmBeforeSwitch } = useDirtyFormGuard();
  
  return (
    <div>
      <SideMenu onMenuClick={confirmBeforeSwitch} />
      <TabContainer onTabChange={confirmBeforeSwitch} />
    </div>
  );
};

关键注意事项 #

• 绝对不能依赖useEffect清理函数拦截：该函数是组件卸载阶段的收尾操作，无法中断React的卸载流程，只能做一些资源清理。
• 确保所有视图切换入口都经过统一的确认函数：包括Tab、菜单、按钮、快捷键等，避免遗漏导致未拦截的情况。

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