未捕获的错误：无效的挂钩调用。钩子只能在体内调用答案

【问题标题】：Uncaught Error: Invalid hook call. Hooks can only be called inside of the body未捕获的错误：无效的挂钩调用。钩子只能在体内调用
【发布时间】：2022-08-14 04:05:57
【问题描述】：

您好，我是编码新手，我想使用 redux 制作我的登录功能，但我的代码有问题。我收到错误：

Uncaught 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:
    
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

这是我的代码

import React, { useEffect, useState } from \'react\'
import { Button, Container, Form } from \'react-bootstrap\'
import { useDispatch, useSelector } from \'react-redux\'
import { Link, useLocation, useNavigate } from \'react-router-dom\'
import { login } from \'../actions/userAction\'
import ErrorMessageBox from \'../components/ErrorMessagebox\'
import Loading from \'../components/Loading\'

export const SignInScreen = () => {
  const navigate = useNavigate
  const [email, setEmail] = useState(\'\')
  const [password, setPassword] = useState(\'\')

  const { search } = useLocation()
  const redirectInUrl = new URLSearchParams(search).get(\'redirect\')
  const redirect = redirectInUrl ? redirectInUrl : \'/\'

  const userLogin = useSelector((state) => state.userLogin)
  const { userInfo, loading, error } = userLogin
  const dispatch = useDispatch()

  useEffect(() => {
    if (userInfo) {
      navigate(redirect)
    }
  }, [navigate, userInfo, redirect])

  const submitHandler = (e) => {
    e.preventDefault()
    dispatch(login(email, password))
  }

  return (
    <Container className=\"small-container\">
      <h1 className=\"my-3\">Sign In</h1>
      {error && <ErrorMessageBox variant=\"danger\">{error}</ErrorMessageBox>}
      {loading && <Loading />}
      <Form onSubmit={submitHandler}>
        <Form.Group className=\"mb-3\" controlId=\"email\">
          <Form.Label>Email</Form.Label>
          <Form.Control
            type=\"email\"
            required
            onChange={(e) => setEmail(e.target.value)}
          />
        </Form.Group>
        <Form.Group className=\"mb-3\" controlId=\"password\">
          <Form.Label>Password</Form.Label>
          <Form.Control
            type=\"password\"
            required
            onChange={(e) => setPassword(e.target.value)}
          />
        </Form.Group>
        <div className=\"mb-3\">
          <Button type=\"submit\">Sign In</Button>
        </div>
        <div className=\"mb-3\">
          New Customer?{\' \'}
          <Link to={`/signup?redirect=${redirect}`}>Create new account</Link>
        </div>
      </Form>
    </Container>
  )
}

当我运行npm ls react-dom 时，它显示

请帮忙，我不知道这个错误是什么意思。

标签： reactjs react-hooks react-redux

【解决方案1】：

先生。我认为你打错了，错误是由于这个。将useNavigate 更改为useNavigate()

import React, { useEffect, useState } from 'react'
import { Button, Container, Form } from 'react-bootstrap'
import { useDispatch, useSelector } from 'react-redux'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { login } from '../actions/userAction'
import ErrorMessageBox from '../components/ErrorMessagebox'
import Loading from '../components/Loading'

export const SignInScreen = () => {
  const navigate = useNavigate()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const { search } = useLocation()
  const redirectInUrl = new URLSearchParams(search).get('redirect')
  const redirect = redirectInUrl ? redirectInUrl : '/'

  const userLogin = useSelector((state) => state.userLogin)
  const { userInfo, loading, error } = userLogin
  const dispatch = useDispatch()

  useEffect(() => {
    if (userInfo) {
      navigate(redirect)
    }
  }, [navigate, userInfo, redirect])

  const submitHandler = (e) => {
    e.preventDefault()
    dispatch(login(email, password))
  }

  return (
    <Container className="small-container">
      <h1 className="my-3">Sign In</h1>
      {error && <ErrorMessageBox variant="danger">{error}</ErrorMessageBox>}
      {loading && <Loading />}
      <Form onSubmit={submitHandler}>
        <Form.Group className="mb-3" controlId="email">
          <Form.Label>Email</Form.Label>
          <Form.Control
            type="email"
            required
            onChange={(e) => setEmail(e.target.value)}
          />
        </Form.Group>
        <Form.Group className="mb-3" controlId="password">
          <Form.Label>Password</Form.Label>
          <Form.Control
            type="password"
            required
            onChange={(e) => setPassword(e.target.value)}
          />
        </Form.Group>
        <div className="mb-3">
          <Button type="submit">Sign In</Button>
        </div>
        <div className="mb-3">
          New Customer?{' '}
          <Link to={`/signup?redirect=${redirect}`}>Create new account</Link>
        </div>
      </Form>
    </Container>
  )
}

【讨论】：