Reactjs 从Firebase身份验证呈现用户数据，导致React输入元素从受控更改为非受控

我正试图从Firebase中提取一些基本数据，以获取用户配置文件。简而言之，我希望从firebase中提取“displayName”和“email”，然后在React组件中显示输入的内部

但是，每次加载页面时，它都会显示以下错误：

警告：组件正在将文本类型的受控输入更改为非受控输入。输入元件不应从受控切换到非受控（反之亦然）。在组件的使用寿命内，决定使用受控或非受控输入元件

组件本身如下所示：

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

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

componentDidMount() {

    var user = firebase.auth().currentUser;
    var name, email;

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

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

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



  render() {
    return (

            <label className="profile-label">Name</label>
              <input className="profile-info-type" type="text" name="displayName" value={this.state.displayName} onChange={this.onChange} />


            <label className="profile-label">Email address</label>
                <input className="profile-info-type" type="email" name="email" value={this.state.email} onChange={this.onChange} />

    )
  }
}

类配置文件扩展组件{
建造师（道具）{
超级（道具）
此.state={
显示名称：“”，
电子邮件：“
}
}
componentDidMount（）{
var user=firebase.auth（）.currentUser；
var名称、电子邮件；
如果（用户！=null）{
name=user.displayName；
email=user.email；
}
这是我的国家({
displayName:name，
电邮：电邮
})
}
onChange=（e）=>{
this.setState（{[e.target.name]：e.target.value}）
}
render（）{
返回(
名称
电子邮件地址
)
}
}

此页面用于更新Firebase配置文件的用户详细信息。我还没有编写这样做的函数，也没有将标签/输入存储在表单中。。我不知道这是否与问题有关

那么我的问题是——是什么导致输入从受控变为非受控？我如何解决这个问题

我以前从未有过，所以不确定我做错了什么

我也不明白为什么有时候会加载数据，而有时候会出现这个错误，数据无法加载

任何反馈都将不胜感激