为什么useContext返回未定义？

Question

I have an issue that is useContext return undefined value.

I create a context for collapsing menu like toggle menu. Afterward I added provider into index file to wrap Main component. I go to Main file import CollapseContext but this is file it's not work:(?

I don't understand why it return undefined .

Below is my code.

src/context/CollapseMenuContext.js

import React, { createContext, useState } from 'react'

export const CollapseContext = createContext()

export default function CollapseProvider({ children }) {
  const [isCollapse, setIsCollapse] = useState(false)

  const toggleCollapse = () => {
    setIsCollapse(!isCollapse)
  }

  const values = {
    isCollapse,
    toggleCollapse,
  }

  return <CollapseContext.Provider value={values}>{children}</CollapseContext.Provider>
}

src/app/index.jsx

import React from 'react'
import Header from '_components/Header'
import CollapseProvider from '../context/CollapseMenuContext.js'
import MainDigistallDesktop from './Main'

function DigistallDesktop() {
  return (
    <CollapseProvider>
      <Header />
      <section className='section-content section-content--top mains-screen pb-0' id='checkHeight'>
        <MainDigistallDesktop />
      </section>
    </CollapseProvider>
  )
}

export default DigistallDesktop

src/app/Main.jsx

import React, { useContext } from 'react'
import { Route, Switch } from 'react-router-dom'
import OrderRecord from './OrderRecord'
import Sidebar from './components/Sidebar/index'
import Dashboard from './Dashboard'
import Delivery from './Delivery'
import Products from './Products'
import Setting from './Setting'
import { CollapseContext } from '../context/CollapseMenuContext.js'

function MainDigistallDesktop() {
  const context = useContext(CollapseContext)
  console.info(context)
  return (
    <div className='container-fluid' style={{ minWidth: '1200px' }}>
      <div className='row'>
        {/* <div className={`${isCollapse ? 'col-1' : 'col-2'} position-relative`}>
          <Sidebar />
        </div> */}
        <div className='col-10 mx-auto'>
          <Switch>
            <Route path='/' exact component={Dashboard} />
            <Route path='/order-records' exact component={OrderRecord} />
            <Route path='/delivery' exact component={Delivery} />
            <Route path='/products' exact component={Products} />
            <Route path='/setting' exact component={Setting} />
          </Switch>
        </div>
      </div>
    </div>
  )
}

export default MainDigistallDesktop

result:

Eidt 1: This is root app file:

export default function App() {
  if (process.env.REACT_APP_ENVIRONMENT === 'production') useScript()

  return (
    <Provider store={store}>
      <ToastProvider>
        <FirebaseContext.Provider value={{ firebase }}>
          <Router history={history}>
            <Switch>
              <Route path='/sign-in' exact={true} component={SignInPage} />
              <Route path='/sign-up' exact={true} component={SignUpPage} />
              <Route path='/reset-password' exact={true} component={ForgotPasswordPage} />
              <Route path='/reset-password-with-code' component={ResetPasswordPage} />
              <Route path='/info' exact={true} component={RedirectGoogleSites} />
              <Route path='/policy' exact={true} component={Policy} />
              <ProtectedRoute path='/welcome' exact={true} component={Welcome} />
              <ProtectedRoute path='/digistall' component={Digistall} /> --> this is index.jsx file
              {/* <ProtectedRoute path='/' component={MainPage} /> */}
              <ProtectedRoute path='/' component={MainDigistallDesktop} /> --> lead to my app current (Main.jsx)
            </Switch>
          </Router>
        </FirebaseContext.Provider>
      </ToastProvider>
    </Provider>
  )
}

Answer 1

EDIT: You need to wrap CollapseProvider with MainDigistallDesktop . in your app component:

return (
    <Provider store={store}>
        <ToastProvider>
            <FirebaseContext.Provider value={{ firebase }}>
            <Router history={history}>
                <Switch>
                <Route path='/sign-in' exact={true} component={SignInPage} />
                <Route path='/sign-up' exact={true} component={SignUpPage} />
                <Route path='/reset-password' exact={true} component={ForgotPasswordPage} />
                <Route path='/reset-password-with-code' component={ResetPasswordPage} />
                <Route path='/info' exact={true} component={RedirectGoogleSites} />
                <Route path='/policy' exact={true} component={Policy} />
                <ProtectedRoute path='/welcome' exact={true} component={Welcome} />
                <ProtectedRoute path='/digistall' component={Digistall} /> --> this is index.jsx file
                {/* <ProtectedRoute path='/' component={MainPage} /> */}


                <ProtectedRoute path='/' render={() => (
                    <CollapseProvider>
                        <MainDigistallDesktop/>
                    </CollapseProvider>
                )} /> --> lead to my app current (Main.jsx)


                </Switch>
            </Router>
            </FirebaseContext.Provider>
        </ToastProvider>
    </Provider>
)