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

Question

您好，我有一个上下文提供程序文件，下面_app.js文件。我想访问_app.js文件中的AppContext。任何人都可以帮助我，我如何访问_app.js文件中的AppContext。我在_app.js文件中导入上下文并检查，但我无法_app.js文件中获取上下文。任何人都可以帮我纠正这个代码，让我知道这里有什么问题。上下文文件import React, { createContext, useState } from 'react';export const AppContext = createContext();let timeout = null;const baseURL = "api/v1/";const headers = { 'Accept': 'application/json', "Content-type": "application/json" };const AppContextProvider = (props) => {const [account, setAccount] = useState();const [alert, setAlert] = useState();const AlertType = { success: "success", error: "error", info: "info", warning: "warning" }const updateAccount = (objAccount) => {    setAccount(objAccount);}const updateAlert = (objAlert) => {    if (objAlert) {        if (objAlert.type == AlertType.success) { objAlert = { message: objAlert.message, type: objAlert.type, cssClass: "alert-teal" }; }        else if (objAlert.type == AlertType.error) { objAlert = { message: objAlert.message, type: objAlert.type, cssClass: "alert-danger" }; }        else if (objAlert.type == AlertType.warning) { objAlert = { message: objAlert.message, type: objAlert.type, cssClass: "alert-warning" }; }        else if (objAlert.type == AlertType.info) { objAlert = { message: objAlert.message, type: objAlert.type, cssClass: "alert-info" }; }    }    setAlert(objAlert);    clearTimeout(timeout);    timeout = setTimeout(() => { setAlert(); }, 8000);}const ExecuteAPI_Get = async (action) => {    let url = baseURL + action;    let response = await fetch(url, {        method: 'GET',        headers: headers    }).catch(err => { console.log(err); });    return await response.json();}

Answer 1

不能在放置提供程序的同一位置使用上下文值。因此，您可以在两个文件中分开：

// _app.tsx

import { ThemeProvider } from '../contexts/theme';

import Container from './_container';

import type { AppProps } from 'next/app';

function MyApp(appProps: AppProps) {

  return (

    <ThemeProvider>

      <Container {...appProps} />

    </ThemeProvider>

  );

}

// _container.tsx

import type { AppProps } from 'next/app';

import { ThemeProvider as SCThemeProvider } from 'styled-components';

import { defaultColors, useTheme } from '../contexts/theme';

const Container = ({ Component, pageProps }: AppProps) => {

  const { colors } = useTheme();

  return (

    <>

      <SCThemeProvider theme={{ colors: colors ? colors : defaultColors }}>

        <Component {...pageProps} />

      </SCThemeProvider>

    </>

  );

};

export default Container;

Answer 2

也许是这样的：

# 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>

       );

    }

}