React函数不返回任何值

Question

我目前正在使用firebase以特定用户的名字和姓氏填充网站，但由于某种原因，它不起作用。

getUserName(){ 
    firebaseAuth().onAuthStateChanged((user) => { 
     if(user){ 
      // var name = ref.ref('users/' + user.uid).once('value').then((snapshot) => console.log(snapshot.val().displayName)); 
      var name = user.displayName; 
      console.log("name in function: " + name); //prints full name 
      return name; 
     } 
    }); 
} 


render() { 
    var name = this.getUserName(); 
    console.log("name: " + name); //prints undefined 
    return (
     <div className="col-sm-6 col-sm-offset-3"> 
      <h1> Welcome {this.getUserName()} asdfasd </h1> 
     </div> 
    ); 
} 

这些是我的两个功能。出于某种原因，当我在这两种情况下打印出名称变量时，我会得到两个不同的变量。在getUserName（）中，它打印出用户的全名，然后我返回该值。当DOM呈现时，即使getUserName（）函数打印出全名，“name”变量也是未定义的。任何帮助将不胜感激！

Answer 1

你的方法getUserName()实际上并不返回任何东西，所以当你尝试它的返回值分配给name -variable，这样var name = this.getUserName();，你永远只是设置name至undefined。

正如Shailesh Prajapati所建议的，您应该在组件状态中设置名称。我甚至会争辩说，你应该使用像Redux这样的东西把它分解成一个全局状态。另外，您不应该在render()函数中调用this.getUserName()，因为它可能（并且很可能会）对性能非常不利。

下面的代码，一切建议：

componentWillMount(){ 
    this.getUserName(); 
} 

getUserName(){ 
    firebaseAuth().onAuthStateChanged((user) => { 
     if(user){ 
      var name = user.displayName; 
      this.setState({ name: name }); 
     } 
    }); 
} 

render() { 
    return (
     <div className="col-sm-6 col-sm-offset-3"> 
      <h1> Welcome {this.state.name} asdfasd </h1> 
     </div> 
    ); 
} 

Answer 2

你必须使用状态而没有variable.Store名称值this.SetState({name: value})和使用在任何你想使用this.state.name直接使用...

所以你必须使用状态

局部变量不能从外部访问功能反应进入功能外状态/可变..