NodeJS useNavigate -无效的钩子调用,只能在函数组件的主体内部调用钩子

oyjwcjzk 于 12个月前发布在 Node.js

关注(0)|答案(2)|浏览(148)

我在前台使用ReactJS，在后台使用NodeJS，我尝试使用navigate函数重定向，但我得到错误。我到底应该怎么做？我遗漏了什么？如果注册表单成功，我如何重定向？

我的操作：

export const signup = (formData,navigation) => async (dispatch) => {
    try {
        const { data } = await API.signUp(formData)
        dispatch({type:AUTH,payload:data})
        let navigate = useNavigate();
        navigate("/");
    } catch (error) {
        dispatch({type:SIGNUP_FAIL,payload:
        error.response && error.response.data.message ? error.response.data.message : error.message
    })
    }
}

字符串

我的组件：

const signUpForm = (e) => {
    e.preventDefault()
    if(!login){
        dispatch(signup(form,navigation))
    }
}

型

node.js

来源：https://stackoverflow.com/questions/70485555/usenavigate-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of

2条答案

按热度按时间

nkkqxpd91#

你需要把钩子移到函数的外部：

const signUpForm = (e) => {
    let navigate = useNavigate();
    e.preventDefault()
    if(!login){
        dispatch(signup(form,navigation,navigate))
    }
}

字符串
以及：

export const signup = (formData,navigation,navigate) => async (dispatch) => {
    try {
        const { data } = await API.signUp(formData)
        dispatch({type:AUTH,payload:data})
        navigate("/");
    } catch (error) {
        dispatch({type:SIGNUP_FAIL,payload:
        error.response && error.response.data.message ? error.response.data.message : error.message
    })
    }
}

型

赞(0）回复(0）举报 12个月前

cqoc49vn2#

解决方案：

将你的React Hook（useNavigate、useEffect、useState等）移动到你的函数组件的根，否则它将被认为是违反Hooks规则（见下文）。

为什么：

补充@hindus帖子，根据官方React文档Rules of Hooks，Hooks can only be called inside the body of a function component。

代码审核

硬失败：

export const SomeView = (props: IDefaultProps) => {
  useEffect(() => {
    const navigate = useNavigate();
    navigate(ErrorPages.Unauthorized, { replace: true });
  });

  return (
    <div>...</div>
  );
}

字符串

成功（感谢@Himdus）：

export const SomeView = (props: IDefaultProps) => {
  const navigate = useNavigate(); // move to the root (outside any component function)

  useEffect(() => {
    navigate(ErrorPages.Unauthorized, { replace: true });
  });

  return (
    <div>...</div>
  );
}

型

关于规则：

Breaking Rules of Hooks，支架：
名称以use开头的函数在React中称为Hooks。
不要在循环，条件或嵌套函数中调用Hooks。相反，> >总是在React函数的顶层，在任何早期>返回之前使用Hooks。你只能在React渲染函数组件时调用Hooks：
在函数组件体的顶层调用它们。
在自定义Hook主体的顶层调用它们。

赞(0）回复(0）举报 12个月前

我来回答