不能在最高级别调用React Hook"useDispatch"。必须在React函数组件或自定义React Hook函数中调用React Hooks

Question

我正在做的是创建一个带有反应挂钩的认证系统。但是，当我声明并调用一个常量时，它会返回下面的错误。声明常量和/或函数的正确位置是什么？

错误：无法在顶层调用React挂钩“useDispatch”。必须在React函数组件或自定义React钩子函数中调用React钩子

function handleSubmit({email, password}) {
  dispatch(signInRequest(email, password));
}

const dispatch = useDispatch();



class Login extends React.Component {
  render() {
    return (
      <>
        //Other code here
      </>
    );
  }
}

export default Login;

Answer 1

你正在使用一个类组件，你正在尝试使用永远不会出错的钩子。钩子应该在功能组件内部调用，如：

const Login = () => {
 const dispatch = useDispatch();

function handleSubmit({email, password}) {
  dispatch(signInRequest(email, password));
}

    return (
      <>
        //Other code here
      </>
    );
  
}

export default Login;

Answer 2

不能在函数组件外部或类组件内部调用react钩子。https://reactjs.org/docs/hooks-rules.html

const Login = () => {
  const dispatch = useDispatch();
  function handleSubmit({email, password}) {
      dispatch(signInRequest(email, password));
  }
  render() {
    return (
      <>
        //Other code here
      </>
    );
  }
}

export default Login;