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.tsximport { ThemeProvider } from '../contexts/theme';import Container from './_container';import type { AppProps } from 'next/app';function MyApp(appProps: AppProps) {&nbsp; return (&nbsp; &nbsp; <ThemeProvider>&nbsp; &nbsp; &nbsp; <Container {...appProps} />&nbsp; &nbsp; </ThemeProvider>&nbsp; );}// _container.tsximport type { AppProps } from 'next/app';import { ThemeProvider as SCThemeProvider } from 'styled-components';import { defaultColors, useTheme } from '../contexts/theme';const Container = ({ Component, pageProps }: AppProps) => {&nbsp; const { colors } = useTheme();&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <SCThemeProvider theme={{ colors: colors ? colors : defaultColors }}>&nbsp; &nbsp; &nbsp; &nbsp; <Component {...pageProps} />&nbsp; &nbsp; &nbsp; </SCThemeProvider>&nbsp; &nbsp; </>&nbsp; );};export default Container;

Answer 2

也许是这样的：# File: app-context.tsconst AppContext = React.createContext({&nbsp; user: null,&nbsp; isAuthenticated: false,&nbsp; setUser: null,});export default AppContext;# File: _app.tsximport AppContext from "./app-context";export default class MyApp extends App {&nbsp; render() {&nbsp; &nbsp; &nbsp;const { Component, pageProps } = this.props;&nbsp; &nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; &nbsp; <AppContext.Provider&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;user: "todo",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;isAuthenticated: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;setUser: "todo",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Component {...pageProps} />&nbsp; &nbsp; &nbsp; &nbsp; </AppContext.Provider>&nbsp; &nbsp; &nbsp; &nbsp;);&nbsp; &nbsp; }}