Javascript 如何访问react js中nextjs中的_app.js文件中的上下文

您好，我有一个上下文提供程序文件和下面的_app.js文件。我想要 访问_app.js文件中的AppContext。谁能帮我，我怎么能 访问_app.js文件中的AppContext

我已在_app.js文件中导入上下文并检查，但无法获取 _app.js文件中的上下文。有人能帮我纠正这个代码吗 让我知道这里有什么问题

上下文文件 _app.js文件

---

也许是这样的：

# File: app-context.ts
const AppContext = React.createContext({
  user: null,
  isAuthenticated: false,
  setUser: null,
});
export default AppContext;

# File: _app.tsx
import AppContext from "./app-context";
export default class MyApp extends App {

  render() {
     const { Component, pageProps } = this.props;

     return (
        <AppContext.Provider 
           value={{
             user: "todo",
             isAuthenticated: false,
             setUser: "todo",
           }}
         >
           <Component {...pageProps} />
        </AppContext.Provider>
       );
    }
}

---

我有完全相同的问题，我不知道把提供商放在哪里。我需要它来切换我的材料界面主题从光明到黑暗。

              import '../public/assets/css/font-awesome.min.css';
              import '../public/assets/css/common.css';
              import '../public/assets/css/style.css';

              import Router from 'next/router';
              import { AppContext, AppContextProvider } from '../components/contextprovider';
              import App from "next/app";
              import { PageTransition } from 'next-page-transitions';
              import Layout from '../components/layout/layout';

              //context not found
              export default class MyApp extends App {
              static contextType = AppContext;
              static async getInitialProps({ Component, router, ctx }) {
                let pageProps = {}
                if (Component.getInitialProps) { pageProps = await Component.getInitialProps(ctx) }
                return { pageProps }
              }

            constructor(props, context) {
                super(props, context);
                Router.events.off('routeChangeStart', () => { }); Router.events.off('routeChangeComplete', () => { }); Router.events.off('routeChangeError', () => { });
                Router.events.on('routeChangeStart', (url) => { }); Router.events.on('routeChangeComplete', (url) => { }); Router.events.on('routeChangeError', (url) => { });
            }
            componentDidMount() { this.CheckLogin(); }

            CheckLogin = () => {
                let cookie = this.getCookie("Bearer");
                if (cookie) {
                    //this.context.ExecuteAPI_Post('auth/me', {}).then((res) => {
                    //    console.log(res);
                    //    if (res && res.data) { this.context.updateAccount(res.data); }
                    //});

                    if ((Router.pathname == '/login' || Router.pathname == '/signup')) { Router.push('/'); }
                }
                else {
                    if (Router.pathname != '/signup') {
                        this.setCookie("Bearer", "", 0);
                        Router.push('/login');
                    }

                }
            }
            //Temporory after get context in _app.js then remove this code and get from context
            setCookie = (cname, cvalue, date) => {
                var expires;
                if (typeof date === "number") {
                    let d = new Date(); d.setTime(d.getTime() + (parseInt(date) * 24 * 60 * 60 * 1000));
                    expires = "expires=" + d.toUTCString();
                }
                else { expires = "expires=" + date.toString(); }
                document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
            }
            getCookie = (cname) => {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }
                    if (c.indexOf(name) == 0) {
                        return c.substring(name.length, c.length);
                    }
                }
                return "";
            }

            render() {
                const { Component, pageProps } = this.props;
                return (
                    <AppContextProvider>
                        <Layout>
                            <PageTransition timeout={300} classNames="page-transition-main page-transition">
                                <Component {...pageProps} />
                            </PageTransition>
                        </Layout>

                        <style jsx global>{`
                            .page-transition-main{width:100%}
                            .page-transition-enter {opacity: 0;}
                            .page-transition-enter-active {opacity: 1;}
                            .page-transition-exit {opacity: 1;}
                            .page-transition-exit-active {opacity: 0;transition: opacity 300ms;}
                      `}</style>
                    </AppContextProvider>
                );
            }
            }

# File: app-context.ts
const AppContext = React.createContext({
  user: null,
  isAuthenticated: false,
  setUser: null,
});
export default AppContext;

# File: _app.tsx
import AppContext from "./app-context";
export default class MyApp extends App {

  render() {
     const { Component, pageProps } = this.props;

     return (
        <AppContext.Provider 
           value={{
             user: "todo",
             isAuthenticated: false,
             setUser: "todo",
           }}
         >
           <Component {...pageProps} />
        </AppContext.Provider>
       );
    }
}