React：刷新页面时表单很干净

Question

我是使用 React 的新手。我有一个名为 UpserProfile 的组件，它从 Firebase 获取数据并将这些数据放入一个表单中。目标是用户能够编辑他的数据/个人资料。

问题是：数据是在我加载页面时加载的。但是，如果我刷新页面，表单字段将变为空/干净。我做错了什么？有人可以帮我增加代码吗？

    class UserProfile extends React.Component{
    
        constructor(props){
            super(props);
            this.state = {
                authUser: null,
                userProfile: new UserProfileModel() // A model with all available properties seted with default values
            }
        }
    
    /**
     * Use auth listner to see if it had an user authenticated
     */
    componentDidMount() {
        this.props.firebase.auth.onAuthStateChanged((authUser) => {
            this.props.firebase.getUserData(authUser.uid).then((response)=>{     
                this.setState({ userProfile: {
                    id: response.id,
                    displayName: response.displayName || "", 
                    name: response.name || "", 
                    email: response.email || "",
                }});
            });
        });
    }
    
    handleInputChange = (event) => {
        let value = event.target.value;
        // If it's the termsAndPrivacy checkbox 
        this.setState({ [event.target.name]: value});
    }
    
    
    onSubmit = (event) => {
        // Prevent to submit the form
        event.preventDefault();
    
        this.props.firebase.user(this.userProfile.id).set(this.userProfile)
          .then(authUser => {
              console.log("Changed user:", authUser);
          })
          .catch(error => {
            console.log("Error: ", error);
            this.setState({ error });
        });
    }
    
    
    render(){
        return(
            <div>
                <BreadCrumb pageTitle="Edit Profile"/>
                <section className="container main-content">
                    <div className="row">
                        <div className="col-md-12">
                            <div className="page-content">
                                <div className="boxedtitle page-title"><h2>Edit Profile</h2></div>
                                <div className="form-style form-style-4">
                                    <form onSubmit={this.onSubmit}>
                                        <div className="form-inputs clearfix">
                                            <p>
                                                <label>Display Name*</label>
                                                <input name="displayName" type="text" onChange={this.handleInputChange} value={this.state.userProfile.displayName}/>
                                            </p>    
                                            <p>
                                                <label>Full name</label>
                                                <input name="name" type="text" onChange={this.handleInputChange} value={this.state.userProfile.name}/>
                                            </p>
                                            <p>
                                                <label className="required">E-Mail<span>*</span></label>
                                                <input name="email" type="email" onChange={this.handleInputChange} value={this.state.userProfile.email}/>
                                            </p>...

有人可以帮帮我吗？

更新： 这是我的 Firebase 课程：

import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import { UserProfileModel } from '../Models/UserProfileModel';

 const firebaseConfig = {
    apiKey: "AI------------------",
    authDomain: "mysite.firebaseapp.com",
    databaseURL: "https://mysite.firebaseio.com",
    projectId: "myprojectid",
    storageBucket: "mysite.appspot.com",
    messagingSenderId: "---------1",
    appId: "1--------------"
  };

  export default class Firebase {
    constructor() {
      app.initializeApp(firebaseConfig);
      this.auth = app.auth();
      this.db = app.database();
    }

async getUserData(uid){
      var userData = new UserProfileModel();
      this.user(uid).on('value', (snapshot) => {
          snapshot.forEach((childSnapshot) => {
              var keyName = childSnapshot.key;
              var childData = childSnapshot.val();
              userData[keyName] = childData;
          });
      });
      return userData;
    }

    // *** USER APO ***

    user = uid => this.db.ref(`users/${uid}`);
    users = () => this.db.ref('users');

Answer 1

您需要使用 Rebase 与您的 Firebase 数据库同步，例如：

Firebase.js：

import Rebase from 're-base';
import firebase from 'firebase';

const firebaseApp = firebase.initializeApp({ apiKey, authDomain, databaseURL, });
const base = Rebase.createClass(firebaseApp.database());

export { firebaseApp };

export default base;

App.js：

import base from '../Firebase';


componentDidMount() {
  ...

  this.ref = base.syncState(newState, {
    context: this,
    state: state
  });

}

Answer 2

确保刷新页面后，firebase 调用会再次发生。这会将新数据设置为状态变量，并且数据将被预填充。