未定义用于 reactjs 多级组件中的 useContext

Question

在我的 src 中，我有 State.js 用于创建上下文，如下 State.js 我**正在使用 react js 当前版本并使用公共和私有路由**

    import React, { createContext, useReducer } from "react"
    let AppsContext = createContext({});
    const initialState = {
    appName : "Arrman",
    user : JSON.parse(localStorage.getItem("arrman-as-user")),
    }
    let reducer = ( state, action ) => {
    switch ( action.type ) {
        case "setAppName" : {
            return {...state, appName : action.payload.appName }
        }
        case "loadUser" : {
            const user = action.payload;
            localStorage.setItem("whatapp-clone-user",JSON.stringify(user));
            return {...state, user: user }
        }
        default:
            break;
       }
     }
     function AppsContextProvider(props) {
     const appState = {
        ...initialState
     }
     let [state, dispatch] = useReducer(reducer, appState);
     let value = {state, dispatch};
     return <AppsContext.Provider value={ value }>{props.children}</AppsContext.Provider>
     }
     export { AppsContext, AppsContextProvider}

---

// 在我的 App.js 中，我正在创建组件，因此我可以根据身份验证使用主题

    import React, { Component, useContext } from 'react';
    import { BrowserRouter } from 'react-router-dom';
    import { AppsContext } from './AppState';
    import CreateRoutes from './routes/createRoutes';
    const App = () => {
    const {state, dispatch} = useContext(AppsContext);
    console.log(state)
    return (
    <BrowserRouter>
      <CreateRoutes></CreateRoutes>
    </BrowserRouter>
    );
    }
    export default App;

---

// 在我的 CreateRouters.js 中

    import React, { useContext } from 'react';
    import PublicRoute from './PublicRoute';
    import PrivateRoute from './PrivateRoute';
    const CreateRoutes = () => {
    return (
    <>
      <PrivateRoute></PrivateRoute>
      <PublicRoute></PublicRoute>
    </>  
    )
    }
    export default CreateRoutes;

---