Javascript 正在尝试呈现返回的Firebase身份验证详细信息'；未定义'；在React web应用程序中

我试图在从Firebase Auth中存储的内容加载“配置文件页”时呈现用户的显示名和电子邮件

我在“componentDidMount”中通过设置Firebase响应的相应状态来实现这一点

奇怪的是，当页面加载时，以及当您刷新页面时，响应是“未定义的”。但是，如果我以任何方式更改代码，保存然后重新加载，则数据将按需要通过并呈现在输入中

这种情况的一个例子是，如果我将“控制台日志”添加到代码中，保存然后刷新-数据将开始呈现，并且它也将记录日志，而不是返回“未定义”

我不完全确定我做错了什么，我试图在我的组件didmount中添加一个异步/等待，但没有效果

以下是我的组件：

class Profile extends Component {
  constructor(props) {
    super(props);

    this.state = {
      displayName: "",
      email: "",
    };
  }

  async componentDidMount() {
    var user = await firebase.auth().currentUser;
    var name, email;

    if (user != null) {
      if (user.displayName !== "") {
        name = user.displayName;
      } else {
        name = "";
      }

      if (user.email !== "") {
        email = user.email;
      } else {
        name = "";
      }
    }

    console.log(name);
    console.log(email);

    return this.setState({
      displayName: name,
      email: email,
    });
  }

  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
    return (
      <div>
        <input
          className="profile-info-type"
          type="text"
          name="displayName"
          value={this.state.displayName || ""}
          onChange={this.onChange}
        />

        <input
          className="profile-info-type"
          type="email"
          name="email"
          value={this.state.email || ""}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

---

首先，

firebase.auth（）.currentUser

不是异步的，因此使用

await

在这里没有帮助。它不会等待当前用户对象变为可用。事实上，当第一次加载页面时，

currentUser

最初为空。在Firebase Auth确定当前用户对象有效后的一段时间内，该对象才可用

要确定用户对象何时第一次可用，您根本不应该使用currentUser。当用户的身份验证状态更改时，应改为使用接收回调：

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // User is signed out.
  }
});

发生这种情况时，您需要安排调用setState，以便更新UI

---

我还建议您阅读更多信息。

首先，

firebase.auth（）。currentUser

不是异步的，因此使用

wait

在这里没有帮助。它不会等待当前用户对象变为可用。事实上，当第一次加载页面时，

currentUser

最初为空。在Firebase Auth确定当前用户对象有效后的一段时间内，该对象才可用

要确定用户对象何时第一次可用，您根本不应该使用currentUser。当用户的身份验证状态更改时，应改为使用接收回调：

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // User is signed out.
  }
});

发生这种情况时，您需要安排调用setState，以便更新UI

---

我还建议您多读一些。

谢谢您的回复。这是我第一次使用firebase，对我来说太新了。：-）那么，我如何将其构建到我的组件中呢？您描述的格式不能与this.setState一起使用。它将返回未定义的“setState”。。我会更新我的答案，让它显示出我对它的想象……这听起来像是一个全新的问题。如果您的新代码没有按照预期的方式工作，请发布一个新问题来解释新问题。感谢您的回复。这是我第一次使用firebase，对我来说太新了。：-）那么，我如何将其构建到我的组件中呢？您描述的格式不能与this.setState一起使用。它将返回未定义的“setState”。。我会更新我的答案，让它显示出我对它的想象……这听起来像是一个全新的问题。如果您的新代码没有按照预期的方式工作，请发布一个新问题来解释新问题。