全局变量即使在函数中重新初始化后也返回 null答案

【问题标题】：global variable returns null even after re-initialization it in a function全局变量即使在函数中重新初始化后也返回 null
【发布时间】：2020-09-13 10:45:37
【问题描述】：

我正在开发 react 应用程序，并使用回调将值从子组件提升到父组件。现在，当我尝试通过执行将回调函数中的值检索到全局变量时

这是父组件

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

【问题讨论】：

把console.log(callBack(1))放在console.log(user)之前。你必须调用函数来改变user的值

标签： javascript reactjs variables callback

【解决方案1】：

你声明了回调函数但你没有调用它

试试这个

var user = null 
const callBack=(isSignedIn)=>{
  user = isSignedIn
  // console.log(user)
  return user
}
callback(boolean)
console.log(user)

【讨论】：

从子组件返回签名值。就像在子组件中一样，代码是 this.props.callBack(this.state.isSignedIn) 它首先返回 false 这个值比在父组件中使用，例如 var user = null const callBack=(isSignedIn)=>{ user = isSignedIn // console.log(user) 返回用户 } console.log(user)

【解决方案2】：

下面是父组件

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

这里的主要代码是粗体

【讨论】：