Javascript 反应：刷新页面时表单是干净的

我是新来的。我有一个名为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调用再次发生。这将把新的数据设置为状态变量，并且数据将被预先填充。

您需要使用

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

}

---

您好@william这是react组件的预期行为。当你刷新应用程序时，我将被卸载，状态被清除。@rashijain，如何防止它？它不应该再次刷新数据吗？不，如果我们想在刷新页面后仍保留数据而不进行提交调用，则需要连续保存数据。我们还需要在componentDidMount中进行API调用，以从服务器获取数据并填写适当的字段。（此数据API调用已经存在）Thx。但是，如何确保这一点呢？当我刷新并再次装载组件时，不应该发生这种情况吗？是关于我调用firebase API的方式，通过道具传递吗？谢谢你的回答。我不知道把这个重基放在哪里，等等。现在，我正在使用一个名为Firebase.js的单独类，在这个类中我有Firebase设置（apiKey域等），并在那里与Firebase进行连接。我必须在哪里放置此组件didMount（）？通常情况下，firebase和rebase将位于一个单独的文件（在您的示例中为firebase.js）中，

componentDidMount（）

将位于您的App.js文件中。我将更新答案以澄清。

import base from '../Firebase';


componentDidMount() {
  ...

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

}