首頁猿問 2我如何訪問 react js 中...

2我如何訪問 react js 中 nextjs 中_app.js文件中的上下文

JavaScript

波斯汪 2022-08-27 10:58:18

您好，我有一個上下文提供程序文件，下面_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();}

查看完整描述

2 回答

精慕HU

TA貢獻1845條經驗獲得超8個贊

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

// _app.tsx

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

import Container from './_container';

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

function MyApp(appProps: AppProps) {

return (

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

</>

);

};

export default Container;

反對回復 2022-08-27

小唯快跑啊

TA貢獻1863條經驗獲得超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",

}}

</AppContext.Provider>

);

}

反對回復 2022-08-27

2 回答
0 關注
96 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

2我如何訪問 react js 中 nextjs 中_app.js文件中的上下文

2我如何訪問 react js 中 nextjs 中_app.js文件中的上下文

2 回答

添加回答