如何解决全局变量即使在函数中重新初始化后也返回null
我正在开发React应用，并使用回调将值从子组件提升到父组件。现在，当我尝试通过执行以下操作将值从callBack函数检索到全局变量时：
这是父组件
import React,{Component} from 'react';
import SignIn from './SignIn'
import About from './WebPageFour'
import SimpleModal from './Modal'
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'
import Header from './Header';
import {isVisited} from './Global';
import Banner from './Banner'
var user = null
const callBack=(isSignedIn)=>{
user = isSignedIn
// console.log(user)
return user
}
console.log(user)
class Main extends Component {
constructor(props){
super(props)
this.visit_checked=this.visit_checked.bind(this);
this.state={
count: 0,isModalOpen:false,isSignedIn:false
}
}
render() {
return(
<>
{/* material-ui navbar */}
<Header/>
<Banner/>
{/* routes for pages */}
<Route path="/SignIn" render={()=>(
<React.Fragment>
<SignIn callBack={callBack}/>
</React.Fragment>
)}
/>
</Switch>
</>
);
}
}
export default (Main);
这是子组件
// Import FirebaseAuth and firebase.
import React from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import 'firebase/auth';
import firebase from 'firebase';
import {Grid,Card,Typography,CardContent,CardActions,TextField,Button,Box} from '@material-ui/core'
// import {auth} from '../helpers/Firebase'
class SignIn extends React.Component {
// The component's Local state.
state = {
isSignedIn: false,// Local signed-in state.
email: '',password:''
};
// Configure FirebaseUI.
uiConfig = {
// Popup signin flow rather than redirect flow.
signInFlow: 'popup',// We will display Google and Facebook as auth providers.
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,firebase.auth.FacebookAuthProvider.PROVIDER_ID
],callbacks: {
// Avoid redirects after sign-in.
signInSuccessWithAuthResult: () => false
}
};
// Listen to the Firebase Auth state and set the local state.
componentDidMount() {
this.unregisterAuthObserver = firebase.auth().onAuthStateChanged(
(user) => this.setState({isSignedIn: !!user})
);
}
// Make sure we un-register Firebase observers when the component unmounts.
componentWillUnmount() {
this.unregisterAuthObserver();
}
handleChange=(e)=>{
this.setState({
[e.target.name]:e.target.value
})
}
handleSubmit(e){
e.preventDefault()
firebase.auth().signInWithEmailAndPassword(this.state.email,this.state.password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log('errors'+errorCode+' error '+errorMessage)
// ...
})
}
render() {
**this.props.callBack(this.state.isSignedIn)**
if (!this.state.isSignedIn) {
return (
<React.Fragment>
<div style={{position:'relative'}}>
<Box mt={5}>
<Grid item container justify="center" xs={12} md={12} lg={12}>
<Card info={this.info}>
<form onSubmit={(values) => this.handleSubmit(values)}>
<CardActions>
<CardContent>
<Box mt={2} mb={4}>
<Typography variant="h5" className="text-capitalize text-center">sign in</Typography>
</Box>
<Box mb={2}>
<TextField label="email" variant="outlined" name="email" size="small" onChange={this.handleChange} /><br/>
</Box>
<Box>
<TextField type="password" name="password" label="password" variant="outlined" size="small" onChange={this.handleChange} />
</Box>
</CardContent>
</CardActions>
<CardActions>
<Box ml={2} mb={2} mt={0} pl={8}>
<Button
type="submit"
value="submit"
variant="contained"
color="primary"
size="small"
className="text-capitalize"
>sign in</Button>
</Box>
</CardActions>
</form>
<br/>
<hr/>
<br/>
<StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
</Card>
</Grid>
</Box>
</div>
</React.Fragment>
);
}
return (
<div>
<Grid container justify="center">
<Grid item className="bg-color" xs={12}>
<h2 style={{textAlign:'center'}}>My App</h2>
</Grid>
<Grid item xs={12} md={8} lg={5} >
<br/>
<p>Welcome {this.state.email} ! You are now signed-in!</p>
<Button onClick={() => firebase.auth().signOut()} color="primary">Sign-out</Button>
</Grid>
</Grid>
</div>
);
}
}
export default SignIn
该函数内的console.log返回所需的值，但在函数外它返回null
解决方法
您声明了回调函数，但未调用
尝试一下
var user = null
const callBack=(isSignedIn)=>{
user = isSignedIn
// console.log(user)
return user
}
callback(boolean)
console.log(user)
以下是父组件
import React,{Component} from 'react';
import SignIn from './SignIn'
import About from './WebPageFour'
import SimpleModal from './Modal'
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'
import Header from './Header';
import {isVisited} from './Global';
import Banner from './Banner'
var user = null
const callBack=(isSignedIn)=>{
user = isSignedIn
// console.log(user)
return user
}
console.log(user)
class Main extends Component {
constructor(props){
super(props)
this.visit_checked=this.visit_checked.bind(this);
this.state={
count: 0,isModalOpen:false,isSignedIn:false
}
}
render() {
return(
<>
{/* material-ui navbar */}
<Header/>
<Banner/>
{/* routes for pages */}
<Route path="/SignIn" render={()=>(
<React.Fragment>
<SignIn callBack={callBack}/>
</React.Fragment>
)}
/>
</Switch>
</>
);
}
}
export default (Main);
这是子组件
// Import FirebaseAuth and firebase.
import React from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import 'firebase/auth';
import firebase from 'firebase';
import {Grid,Card,Typography,CardContent,CardActions,TextField,Button,Box} from '@material-ui/core'
// import {auth} from '../helpers/Firebase'
class SignIn extends React.Component {
// The component's Local state.
state = {
isSignedIn: false,// Local signed-in state.
email: '',password:''
};
// Configure FirebaseUI.
uiConfig = {
// Popup signin flow rather than redirect flow.
signInFlow: 'popup',// We will display Google and Facebook as auth providers.
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,firebase.auth.FacebookAuthProvider.PROVIDER_ID
],callbacks: {
// Avoid redirects after sign-in.
signInSuccessWithAuthResult: () => false
}
};
// Listen to the Firebase Auth state and set the local state.
componentDidMount() {
this.unregisterAuthObserver = firebase.auth().onAuthStateChanged(
(user) => this.setState({isSignedIn: !!user})
);
}
// Make sure we un-register Firebase observers when the component unmounts.
componentWillUnmount() {
this.unregisterAuthObserver();
}
handleChange=(e)=>{
this.setState({
[e.target.name]:e.target.value
})
}
handleSubmit(e){
e.preventDefault()
firebase.auth().signInWithEmailAndPassword(this.state.email,this.state.password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log('errors'+errorCode+' error '+errorMessage)
// ...
})
}
render() {
**this.props.callBack(this.state.isSignedIn)**
if (!this.state.isSignedIn) {
return (
<React.Fragment>
<div style={{position:'relative'}}>
<Box mt={5}>
<Grid item container justify="center" xs={12} md={12} lg={12}>
<Card info={this.info}>
<form onSubmit={(values) => this.handleSubmit(values)}>
<CardActions>
<CardContent>
<Box mt={2} mb={4}>
<Typography variant="h5" className="text-capitalize text-center">sign in</Typography>
</Box>
<Box mb={2}>
<TextField label="email" variant="outlined" name="email" size="small" onChange={this.handleChange} /><br/>
</Box>
<Box>
<TextField type="password" name="password" label="password" variant="outlined" size="small" onChange={this.handleChange} />
</Box>
</CardContent>
</CardActions>
<CardActions>
<Box ml={2} mb={2} mt={0} pl={8}>
<Button
type="submit"
value="submit"
variant="contained"
color="primary"
size="small"
className="text-capitalize"
>sign in</Button>
</Box>
</CardActions>
</form>
<br/>
<hr/>
<br/>
<StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
</Card>
</Grid>
</Box>
</div>
</React.Fragment>
);
}
return (
<div>
<Grid container justify="center">
<Grid item className="bg-color" xs={12}>
<h2 style={{textAlign:'center'}}>My App</h2>
</Grid>
<Grid item xs={12} md={8} lg={5} >
<br/>
<p>Welcome {this.state.email} ! You are now signed-in!</p>
<Button onClick={() => firebase.auth().signOut()} color="primary">Sign-out</Button>
</Grid>
</Grid>
</div>
);
}
}
export default SignIn
其中的主要代码是粗体
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。