reactjs - getUserConfirmation 提示带历史重定向的 React Router

Question

我使用 createBrowserHistory 和 getUserConfirmation 来处理离开表单状态已更改的页面时的确认用户验证:

import { createBrowserHistory } from 'history';
import store from './store';
import { displayPrompt } from './ui/navigation-prompt/navigationPromptDucks';

export default createBrowserHistory({
  getUserConfirmation(message, callback) {
    store.dispatch(displayPrompt(message, callback));
  },
});

效果很好:当我开始编辑表单并尝试离开当前页面时，我收到了确认提示。

现在，假设我有一个删除按钮来删除表单的资源，当删除成功时，我得到了到资源列表页面的历史记录重定向。

我的问题是:如果我开始编辑表单并最终决定点击删除按钮来删除资源而不是编辑它，历史记录会触发表单已更改，并会在历史记录重定向之前显示确认提示。

我有两个选择。首先，我可以放回初始表单状态以避免出现提示。其次，还有另一种方法可以防止在某些情况下出现提示。

最好的解决方案是什么？如果是第二个，你能告诉我该怎么做吗？

解决方案1(首选)

在历史重定向之前重置表单:

const mapDispatchToProps = (dispatch, { user, history, t }) => ({
  deleteUser: () => new Promise((resolve, reject) => {
    dispatch(newAlertDialog(
      t('confirmDeleteUser', { user: user.name }),
      t('confirmDeleteTitle'),
      () => dispatch(requestDeleteUser(user.id, resolve, reject)),
      t('delete'),
    ))
  }).then(() => {
    // reset form to avoid prompt user confirmation
    dispatch(reset('EditUser'));
    history.push('/users');
  })
});

Answer 1

在历史重定向之前重置表单似乎是我的情况的最佳解决方案:

const mapDispatchToProps = (dispatch, { user, history, t }) => ({
  deleteUser: () => new Promise((resolve, reject) => {
    dispatch(newAlertDialog(
      t('confirmDeleteUser', { user: user.name }),
      t('confirmDeleteTitle'),
      () => dispatch(requestDeleteUser(user.id, resolve, reject)),
      t('delete'),
    ))
  }).then(() => {
    // reset form to avoid prompt user confirmation
    dispatch(reset('EditUser'));
    history.push('/users');
  })
});

由于资源将被删除，重置表单的初始值是避免弹出提示的好方法。