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');
  })
});

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

具有历史记录重定向的getUserConfirmation提示React Router

1 个答案: