无效的挂机呼叫警告

Question

我遇到了这个错误：“无效的挂钩调用警告”，它说它发生的原因有三种可能性：

1. 您可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用中拥有多个 React 副本

1 和 3 我很确定它们不会导致问题，我昨天从“create react-app”样板中安装了 react。

这是导致问题的代码。

import { createContext, useState, useContext } from "react"
import api from "../services/api"

export const AuthContext = createContext({})

const [user, setUser] = useState(null)

async function Login() {
  const response = await api.post("/auth/local", {
    identifier: "teste@teste.com",
    password: "123123",
  })

  setUser(response.data.user)
  api.defaults.headers.Authorization = `Bearer ${response.data.token}`
}

export function AuthProvider({ children }) {
  return (
    <AuthContext.Provider value={{ signed: Boolean(user), Login }}>
      {children}
    </AuthContext.Provider>
  )
}

export function useAuth() {
  const context = useContext(AuthContext)

  return context
}

谁能帮帮我？

Answer 1

您只能在组件内部使用 Hook。您还需要将登录功能的状态也移动到提供程序组件。

类似的东西；

import { createContext, useState, useContext } from "react"
import api from "../services/api"

export const AuthContext = createContext({})


export function AuthProvider({ children }) {

const [user, setUser] = useState(null)

async function Login() {
  const response = await api.post("/auth/local", {
    identifier: "teste@teste.com",
    password: "123123",
  })

  setUser(response.data.user)
  api.defaults.headers.Authorization = `Bearer ${response.data.token}`
}

  return (
    <AuthContext.Provider value={{ signed: Boolean(user), Login }}>
      {children}
    </AuthContext.Provider>
  )
}

export function useAuth() {
  const context = useContext(AuthContext)

  return context
}