使用在_app.js中实现的React.createContext()
提问于 2020-11-05 22:42:50
我想从我的上下文从另一个组件访问emailLogin：
userContext.js
import React, { useEffect, useState } from 'react';
import cookie from 'js-cookie';
import {firebase} from './firebase-client';
export const UserContext = React.createContext();
const tokenName = 'firebaseToken';
const UserProvider = ({ children }) => {
const emailLogin = async (email, password, redirectPath) => {
await firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(() => {
console.log('User logged in.');
})
.catch((err) => {
console.log(err);
});
};
const onAuthStateChange = () => {
return firebase.auth().onAuthStateChanged(async (user) => {
if (user) {
const token = await user.getIdToken();
cookie.set(tokenName, token, { expires: 14 });
} else {
cookie.remove(tokenName);
}
});
};
useEffect(() => {
const unsubscribe = onAuthStateChange();
return () => {
unsubscribe();
};
}, []);
return <UserContext.Provider value={{ emailLogin }}>{children}</UserContext.Provider>;
};
export default UserProvider;_app.js
import React from 'react';
import Head from 'next/head';
import App from 'next/app'
import cookies from 'next-cookies'
import UserProvider from '../lib/userContext'
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../theme';
export default function MyApp(props) {
const { Component, pageProps, user } = props;
React.useEffect(() => {
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
return (
<React.Fragment>
<Head>
<title>My app</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
<CssBaseline />
<UserProvider>
<Component {...{...pageProps, ...user}} />
</UserProvider>
</ThemeProvider>
</React.Fragment>
);
}
MyApp.getInitialProps = async (userContext) => {
const { ctx } = userContext;
let error;
const appProps = await App.getInitialProps(userContext);
const { firebaseToken } = cookies(ctx);
if (firebaseToken) {
try {
const headers = {
'Context-Type': 'application/json',
Authorization: JSON.stringify({ token: firebaseToken }),
};
const dev = process.env.NODE_ENV === 'development';
const server = dev ? 'http://localhost:3000' : 'https://firebase-app-taupe.vercel.app/';
const result = await fetch(`${server}/api/validate`, { headers }).then((res) => res.json());
return { ...result, ...appProps };
} catch (e) {
console.log(e);
}
}
return { ...appProps };
};auth.js
import { useContext } from 'react'
import Button from '@material-ui/core/Button'
import {Grid, TextField} from '@material-ui/core'
import UserContext from '../lib/userContext'
const auth = () => {
const { emailLogin } = useContext(UserContext);
return (
<Grid container spacing={0} direction="column" alignItems="center" justify="center" style={{ minHeight: '100vh' }}>
<Grid item>
<div>
<TextField value="diegopitt@gmail.com" label="email" /><br /><br />
<TextField value="12345678" label="password" type="password" /><br /><br />
<Button variant="contained" color="primary" onClick={() => login('diegopitt@gmail.com', '12345678')}>Sign In</Button>
</div>
</Grid>
</Grid>
)
}
export default auth如何从认证组件访问函数emailLogin？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-05 23:01:17
当您传递一个对象作为您的上下文值时，每当您想要使用rmail字段时，您可以这样做：
const ctx = useContext(UserContext);
ctx.emailLogin(...)以便访问emailLogin字段。或者更简单：const { emailLogin } = useContext(UserContext);
别忘了先导入UserContext。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64706379
复制
![[Microsoft Teams]使用连接器接收Azure Devops的通知](https://ask.qcloudimg.com/http-save/yehe-3964600/ez13wrm13v.png)
腾讯云开发者
