无法解决，Hooks只能在函数组件内部调用

Question

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

Warning: An unhandled error was caught from submitForm() Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)

这是版本

 "react-dom": "^17.0.2",

 "react": "^17.0.2",

You might be breaking the Rules of Hooks

You might have more than one copy of React in the same app

我只使用一个应用程序。

我在其他项目中也用过类似的方法，但这次不行，请帮助我消除这个问题。那就是相关代码。

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

你可以试试 useRef

const navigate = useRef(useNavigate());

......


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

Answer 2

您正在将 useDispatch 函数分配给 dispatch const

const dispatch = useDispatch;

而不是调用钩子来获取实际的调度函数

const dispatch = useDispatch();

这就是您稍后在调用调度时收到错误的原因。

无法解决，Hooks只能在函数组件内部调用

Unable to Solve , Hooks can only be called inside of the body of a function component

javascript

reactjs

redux