React/Redux : 在组件销毁前检测并执行指令

Question

欧拉，

在我的 redux 状态下，我有一个 isEditing 布尔值，在 false 处启动，用于管理配置文件编辑模式。我创建了一个 redux 动作来切换这个状态。下面是组件渲染的一些屏幕。

在大多数情况下有效：

当我点击编辑名称时，我切换到 true 并显示编辑表单

当我点击保存（或取消）时，它执行（或不执行）api 请求，然后切换到 false，显示初始组件

但是如果我开始编辑然后 quit 页面手动（通过标志 link 或 url），然后回到这个页面，显然，编辑模式是true.

仍然活跃

我想在离开页面时将我的状态设为 false，但我找不到任何选项来在组件销毁之前分派操作（例如旧的 componentWillUnmount() class 编程方法或 beforeUnmount VueJS equivalent)

PS ：我使用 React Router V6。似乎在测试期间实现了一个钩子，但从未发布过，此后没有消息:(

另一种方法是在组件创建时强制值 false，使用 useEffect。它有效，但我认为这不是正确的地方。我看到编辑模式在我的 ui 中打开然后在几毫秒内关闭。

提前致谢

Answer 1

我相信您可以在 useEffect return 值中发送一个动作，例如 useEffect(() => { return () => dispatch(changeEditMode(false)) }, [])。它主要类似于 componentWillUnmount()。

Answer 2

尝试对 useEffect hook

使用清理

   useEffect(() => {
    // Specify how to clean up after this effect:
    return function cleanup() {
      // make redux call to toggle edit mode
    };
  });

React/Redux : 在组件销毁前检测并执行指令

React/Redux : Detect and exectute instructions before component destruction

reactjs

redux

react-redux

react-hooks