需求是：
表单编辑后没保存，跳转其他页面需要提示未保存，保存就继续form的submit，反之就是关闭弹窗，再切换菜单正常跳转路由。

关键代码如下：

const [initialFormValues, setInitialFormValues] = useState({});
  const initialFormValuesRef = useRef(initialFormValues);


  const handleGeneralForm = () => {
    const {
      avatar = '',
      tenantName = '',
      timeZoneId = '',
      tenantEmail = '',
      webSite = '',
      address = '',
    } = currentUserTenant;

    form.setFieldsValue({
      avatar,
      tenantName,
      timeZoneId,
      tenantEmail,
      webSite,
      address,
    });
    setInitialFormValues(form.getFieldsValue());
  };

  useEffect(() => {
    loadGetAllTimeZone();
    handleGeneralForm();
    initialFormValuesRef.current = form.getFieldsValue();
  }, []);

  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
  const [blockOpen, setBlockOpen] = useState(false);
  const deleteAvatar = () => {
    form.setFieldsValue({
      avatar: '',
      icon: '',
    });
    setDeleteConfirmOpen(false);
  };

  useEffect(() => {
    const unblock = history.block(({ location, action }) => {
      if (action === 'PUSH' || action === 'REPLACE') {
        const pathname = location.pathname;
        unblock();
        const isFormChanged = isEqual(form.getFieldsValue(), initialFormValuesRef.current);
        if (!isFormChanged) {
          setBlockOpen(true);
        } else {
          history.push({
            pathname: pathname,
            search: location.search,
          });
        }
      }
    });

    return () => {
      unblock();
    };
  }, []);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.

import { isEqual } from 'lodash';

const isFormChanged = isEqual(form.getFieldsValue(), initialFormValuesRef.current);

这就是个对比