0

我想知道如何手动删除特定路线的 setRouteLeaveHook。该页面说在大多数情况下我不需要手动执行此操作，但没有提及如果需要我可以如何执行此操作。

在大多数情况下，您不需要手动拆除路线离开挂钩。离开相关路线后，我们会自动删除所有附加的路线离开钩子。

原因可能最好通过示例来解释。

class Editor extends Component {

componentDidMount(){
    const { dispatch, dirty, route } = this.props;
    const { router } = this.context;
    router.setRouteLeaveHook(route, this.routerWillLeave.bind(this));
}

routerWillLeave(nextLocation){
  console.debug('routerWillLeaveCalled -> ', this.props);
  let { dirty, dispatch, resetForm } = this.props;
  const { router } = this.context;
  if (dirty) {
    let dialog = {
      id: Date.now(),
      showTitle: true,
      titleContent: 'Unsaved Changes',
      titleIcon: 'fa fa-warning',
      content: <span>You have <strong>unsaved</strong> changes! <strong>Discard</strong> them?</span>,
      type: 'confirm',
      handleCloseClick: (e) => {
        e.preventDefault();
        dispatch(closeDialog());
      },
      acceptBtn: {
        title: 'Okay',
        handler: (e) => {
          e.preventDefault();
          resetForm();
          console.debug('handler dirty ->', dirty);
          dispatch(push(nextLocation));
          // dispatch(closeDialog());
        }
      },
      denyBtn: {
        title: 'Deny',
        handler: (e) => {
          e.preventDefault();
          dispatch(closeDialog());
        }
      }
    }
    dispatch(addDialogWindow(dialog));
    dispatch(openDialog(false, (e) => dispatch(closeDialog()), false));
    return false;
  }
  return true;
}

}

我遇到的问题在acceptBtn. 在调用 redux-formsresetForm()函数之后，Editor 组件还没有更新（使用新的 props，我不确定为什么），这意味着在dispatch(push(nextLocation));调用时，dirty 仍然设置为 true。

下面是流程的样子：

  1. 单击链接会导致不同的路线。
  2. 第一次调用 routerWillLeave。它调度了一些显示我的对话框的动作（它有两个按钮接受和拒绝）。
  3. 当第一次单击 acceptBtn 时，会再次调用 routeWillLeave（因为它仍然被钩住）。由于某种原因，即使resetForm()已分派组件，此时组件仍未更新，这意味着dirty == true再次执行相同的代码块。
  4. 现在再次单击acceptBtn 将再次触发routerWillLeave，但这一次dirty == false它返回true，并且路由会发生应有的变化。

acceptBtn以下是第一次点击后已经派发的动作。

action @ 01:26:08.101 redux-form/RESET 
action @ 01:26:08.105 @@router/CALL_HISTORY_METHOD 
action @ 01:26:08.117 ADD_DIALOG_WINDOW 
action @ 01:26:08.127 OPEN_DIALOG

这是在第二次单击它之后。

action @ 01:26:02.235 ADD_DIALOG_WINDOW 
action @ 01:26:02.239 OPEN_DIALOG 
action @ 01:26:08.101 redux-form/RESET 
action @ 01:26:08.105 @@router/CALL_HISTORY_METHOD 
action @ 01:26:08.117 ADD_DIALOG_WINDOW 
action @ 01:26:08.127 OPEN_DIALOG 
action @ 01:43:10.358 redux-form/RESET 
action @ 01:43:10.363 @@router/CALL_HISTORY_METHOD 
action @ 01:43:10.372 @@router/LOCATION_CHANGE 
action @ 01:43:10.670 redux-form/DESTROY 
action @ 01:43:10.676 redux-form/DESTROY

因此，我想做的是删除 acceptBtn 的处理函数中的钩子。这可能/可以吗？还是我做错了什么，或者有更好的方法来完成这个？

4

2 回答 2

4

删除 setRouteLeaveHook 钩子。

let remove = router.setRouteLeaveHook(route, (nextLocation) => {
   remove()
})
于 2017-03-02T08:01:50.073 回答
0

似乎这是调度调用的定时执行问题。将位置调度包装在超时 0 中解决了该问题。

      acceptBtn: {
        title: 'Okay',
        handler: (e) => {
          e.preventDefault();
          resetForm();
          // Wait for call stack to unwind and then execute
          // the following which will now have the updated values.
          setTimeout(() => {
            dispatch(push(nextLocation));
            dispatch(closeDialog());
          }, 0);
        }
      },
于 2016-03-13T04:56:02.743 回答