Блог

Я сталкиваюсь с этой ошибкой: «Недопустимое предупреждение о вызове», и в нем говорится, что есть три возможности объяснить, почему это происходит:

1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM).
2. Возможно, вы нарушаете Правила Крючков
3. У вас может быть более одной копии React в одном приложении

1 и 3 Я совершенно уверен, что они не вызывают проблемы, вчера я установил react из шаблона «создать приложение 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
}
 

Кто-нибудь может мне помочь?

Вы можете использовать крючки только внутри компонента. Вам также необходимо переместить свои состояния и функцию входа в систему в компонент поставщика.

Что-то вроде этого;

 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
}