javascript - Uncaught TypeError: Cannot destructure property 'xxx' of 'useAuth(...)' as it is un

admin管理员组

文章数量:1401673

Working with React Context and Hooks I am creating a provider called AuthProvider and from the useAuth Hook I call that context to work with it. I have a ponent called Login in which I call my Hook to access the AuthProvider as follows:

import useAuth from '../hooks/useAuth'

const Login = () => {

  const { hello } = useAuth() 

  console.log(hello);

...

In AuthContext I have the variable "hello" that I pass to the children of my context.

AuthProvider:

const AuthContext = createContext()

const AuthProvider = ({children}) => {

    const hello= 'hello'

    return (
        <AuthContext.Provider value={{ hello }}>
          {children}
        </AuthContext.Provider>
      )
}

export {
     AuthProvider
}

export default AuthContext

UseAuth Hook:

import { useContext } from "react";
import AuthContext from "../context/AuthProvider";

const useAuth  = () => {

     return useContext(AuthContext)

}

export default useAuth

And this is the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'hello')

Working with React Context and Hooks I am creating a provider called AuthProvider and from the useAuth Hook I call that context to work with it. I have a ponent called Login in which I call my Hook to access the AuthProvider as follows:

import useAuth from '../hooks/useAuth'

const Login = () => {

  const { hello } = useAuth() 

  console.log(hello);

...

In AuthContext I have the variable "hello" that I pass to the children of my context.

AuthProvider:

const AuthContext = createContext()

const AuthProvider = ({children}) => {

    const hello= 'hello'

    return (
        <AuthContext.Provider value={{ hello }}>
          {children}
        </AuthContext.Provider>
      )
}

export {
     AuthProvider
}

export default AuthContext

UseAuth Hook:

import { useContext } from "react";
import AuthContext from "../context/AuthProvider";

const useAuth  = () => {

     return useContext(AuthContext)

}

export default useAuth

And this is the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'hello')

• javascript
• reactjs
• react-context

Share Improve this question Follow edited Apr 16, 2022 at 1:33 OscarDev asked Apr 16, 2022 at 1:17 OscarDevOscarDev 97711 gold badge1515 silver badges4040 bronze badges 2

• But I'm passing it from my context to the login ponent through the hook – OscarDev Commented Apr 16, 2022 at 1:20
• An apology, my mistake when translating, I already corrected it and "hello" is the well-written variable. The error persists. – OscarDev Commented Apr 16, 2022 at 1:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The problem is that the ponent you use context but was not wrapped under a context provider

To fix, wrap the ponent or the root ponent that has the ponent as a children under a context provider

<AuthProvider>
  <Login />
</AuthProvider>

Demo

References

https://reactjs/docs/context.html

https://reactjs/docs/hooks-reference.html#usecontext

本文标签：