React Context 没有定义 no-undef

Question

I have navigation constant which is an array of objects(web-store mega-nav). I need to use context provider and when I'm trying to use my context it's telling me NavContext' is not defined no-undef .

NavContext.js

import { createContext } from 'react'

const navigation = [...] // array of objects

const NavContext = createContext(navigation)

export default NavContext

Nav.js

import {createContext} from 'react'
import NavContext from './context/NavContext' //added

function Nav() {

    return (
        <NavContext.Provider> //deleted value
        // childrens
        </NavContext.Provider>
    )
}

Sidebar.js

//then in one of the child I'm trying to call it:

import { useContext } from 'react'
import NavContext from '../context/NavContext' //added

function Sidebar(){
    const nav = useContext(NavContext)

    return (
        {nav.map(...)} // nav is undefined
    )
}

Now nav constant is undefined when I'm using useContext

Answer 1

For my knowledge, you have to import useContext like this.

import React, { useContext } from 'react'

Answer 2

You need to export the create context like this

export const NavContext = createContext(navigation)

Then import it into your child component like this

import { NavContext} from "../Nav";

Answer 3

//Create a new NavContext.js File.

 import React, { createContext, useReducer } from "react"; export const NavContext = createContext(); const initialState = { } function reducer(state, action) { return {...state, ...action }; } export const NavProvider = (props) => { const [state, dispatch] = useReducer(reducer, initialState); return ( <NavContext.Provider value={{ state, dispatch }}> {props.children} </NavContext.Provider> ); };

Then in your index.js file.

 import { NavProvider} from "./NavContext"; ReactDOM.render( <NavProvider> <App /> </NavProvider>, document.getElementById("root") );

If that doesnt work idk what will.

Answer 4

Try not to pass any arguments into createContext, then pass navigation into Context provider as prop

<Context.Provider value={navigation} />

And then get the value using useContext Hook in your consumer component