React函數不返回任何值

我目前正在使用firebase以特定用戶的名字和姓氏填充網站，但由於某種原因，它不起作用。React函數不返回任何值

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」變量也是未定義的。任何幫助將不勝感激！

來源

2016-12-26 Thomas Kim

什麼打印，當你做'的console.log（「名」，this.getUserName（））'呢？ – 2016-12-26 05:59:06

你的方法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> 
    ); 
}

來源

2016-12-26 08:02:33

你必須使用狀態而沒有variable.Store名稱值this.SetState({name: value})和使用在任何你想使用this.state.name直接使用...

所以你必須使用狀態

局部變量不能從外部訪問功能反應進入功能外狀態/可變..

來源

2016-12-26 06:03:56

React函數不返回任何值

回答

相關問題