我试图在从我的 Firebase Auth 中存储的内容加载“个人资料页面”时呈现用户的 displayName 和电子邮件。

我在“componentDidMount”中通过设置与来自 Firebase 的响应相关的状态来执行此操作。

但奇怪的是，当页面加载时以及每次刷新时，响应都是“未定义”。但是，如果我以任何方式更改代码，保存然后重新加载，数据就会根据需要提取并呈现在我的输入中。

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

我不完全确定我做错了什么，我试图在我的 componentDidMount 中添加一个 async/await，但无济于事。

这是我的组件：

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

任何反馈都将不胜感激。

编辑：更新的 componentDidMount 调用：

 componentDidMount() {

    firebase.auth().onAuthStateChanged(function(user) {
    if (!user) {
      this.setState({
        displayName: "",
        email: ""
      })
    } else {
        this.setState({
          displayName: user.displayName,
          email: user.email
        })
    }
  });

  }