主页 / coding / 问题 / 79301242
Accepted
mikeb
Asked: 2024-12-22 23:31:20 +0800 CST

React - onSubmit 和 useNavigate 模式

  • 772

我尝试在 React 中使用提交和重定向，useCallback但我没有正确使用钩子。保存数据然后重定向的模式是什么？

const onSubmit = useCallback((data: FacilityEntity) => {
  saveFacility(data);
  useNavigate().navigate('/facilities', { replace: true })
}, []);
javascript

1 个回答

  1. Best Answer

    问题

    该代码违反了 React 的Hooks 规则，特别是在回调/嵌套函数中调用它

    不要在循环、条件或嵌套函数中调用 Hooks。相反，应始终在 React 函数的顶层（任何早期返回之前）使用 Hooks。您只能在 React 渲染函数组件时调用 Hooks：

    • ✅ 在函数组件主体的顶层调用它们。
    • ✅ 在自定义 Hook 的主体顶层调用它们。

    除此以外的情况下不支持调用 Hooks（以 开头的函数use），例如：

    • 🔴 不要在条件或循环内调用 Hooks。
    • 🔴 不要在条件return语句后调用 Hooks。
    • 🔴不要在事件处理程序中调用 Hooks。
    • 🔴 不要在类组件中调用 Hooks。
    • 🔴 不要在传递给useMemo、useReducer或 的函数内调用 Hooks useEffect。

    解决方案

    在顶层调用所有 React hooks。将useNavigatehook 调用移到回调函数之外，并指定所有适当的 hook 依赖项。

    例子：

    const navigate = useNavigate();

...

const onSubmit = useCallback((data: FacilityEntity) => {
  saveFacility(data);
  navigate('/facilities', { replace: true });
}, [navigate, saveFacility]);
    • 1

相关问题