无法解决，只能在function组件的body内部调用Hooks

Question

我正在尝试从组件发送登录名 function。 但是提交时出现这个错误

警告：未处理的错误从 submitForm() 错误：无效挂钩调用中捕获。 钩子只能在 function 组件的内部调用。 这可能由于以下原因之一而发生：

1. 您可能有不匹配的 React 版本和渲染器（例如 React DOM）

这是版本

 "react-dom": "^17.0.2",

 "react": "^17.0.2",

2. 你可能违反了 Hooks 规则
3. 你可能在同一个应用程序中有多个 React 副本

我只使用一个应用程序。

我一直在其他项目中类似地使用这种方法，但是这次它不起作用，请帮助我消除这个问题。 那就是相关的代码。

export default function LoginForm() {
  const dispatch = useDispatch;
  const navigate = useNavigate();

  const userLogin = useSelector((state) => state.userLogin);
  const { error: loginError, loading: loginLoading, userInfo } = userLogin;

  const [showPassword, setShowPassword] = useState(false);

  const LoginSchema = Yup.object().shape({
    email: Yup.string().email('Email must be a valid email address').required('Email is required'),
    password: Yup.string().required('Password is required'),
  });

  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    validationSchema: LoginSchema,
    onSubmit: () => {
      dispatch(login(values.email, values.password));
    },
  });

  const { errors, touched, values, isSubmitting, handleSubmit, getFieldProps } = formik;

  const handleShowPassword = () => {
    setShowPassword((show) => !show);
  };

  useEffect(() => {
    if (userInfo) {
      navigate('/dashboard', { replace: true });
    }
  }, [navigate, userInfo]);

Answer 1

您正在分配useDispatch function 以dispatch const

const dispatch = useDispatch;

而不是调用挂钩来获取实际的调度 function

const dispatch = useDispatch();

这就是为什么稍后调用调度时会出现错误的原因。

Answer 2

你可以试试 useRef

const navigate = useRef(useNavigate());

......


useEffect(() => {
    if (userInfo) {
      navigate('/dashboard', { replace: true });
    }
  }, [navigate, userInfo]);