Javascript React函数不返回任何值

我目前正在使用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（）{
firebaseAuth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
//var name=ref.ref（'users/'+user.uid）。一次（'value'）。然后（（快照）=>console.log（snapshot.val（）.displayName））；
var name=user.displayName；
console.log（“函数中的名称：”+name）；//打印全名
返回名称；
}
});
}
render（）{
var name=this.getUserName（）；
console.log（“name:+name）；//未定义的打印
返回(
欢迎{this.getUserName（）}asdfasd
);
}

---

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

您必须使用状态而不是变量。将名称值存储在

this.SetState（{name:value}）

中，并直接使用

this.State.name

在您希望使用的任何位置

---

局部变量无法从函数外部访问，因此您必须在react中使用state来访问函数外部的状态/变量。

您的方法

getUserName（）

实际上不返回任何内容，因此当您尝试将其返回值赋给

name

-变量时，就像这样

var name=this.getUserName（）

，您总是将

名称

设置为

未定义

正如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>
    );
}

componentWillMount（）{
这个.getUserName（）；
}
getUserName（）{
firebaseAuth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
var name=user.displayName；
this.setState（{name:name}）；
}
});
}
render（）{
返回(
欢迎{this.state.name}asdfasd
);
}

当您执行

console.log（“name:，this.getUserName（））

时会打印什么？