通過React從mongoDB中檢索數據

Question

我在Node，React和MongodDB（mongoose）中開發這個簡單的應用程序，我可以在其中注冊用戶，然后我可以編輯用戶的信息。 問題是，當我顯示剛剛注冊的內容（編輯組件）時，我被困住了。 我想在編輯組件字段中顯示用戶的信息，這與Register組件完全相同。 我不知道如何將這些信息反饋並顯示出來。

class Register extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
        email: '',
        telephone:''

    }
}

onEmailChange = (event) => {
    this.setState({email: event.target.value})
}

onTelephoneChange = (event) => {
    this.setState({telephone: event.target.value})
}

render () {
return (
  <article className="br3 ba b--black-10 mv4 w-100 w-50-m w-30-l shadow-5 center">  
            <main className="pa4 black-80">
            <div className="measure">
                <fieldset id="email" className="ba b--transparent ph0 mh0">
                    <div className="mt3">
                        <label className="db fw6 lh-copy f6">Email</label>
                        <MaskedInput 
                            className="  borderColour pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" 
                            placeholder='john@email.com'
                            id="email"
                            required
                            onChange={this.onEmailChange}
                            /> 
                        <label className="db fw6 lh-copy f6">Zona</label>
                            <div className="mv3">
                        <label className="db fw6 lh-copy f6">Telefone</label>
                        <MaskedInput
                            className=" borderColour b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
                            placeholder="(41) 99989-0909" 
                            onChange={this.onTelephoneChange}
                            /> 
                    </div>

    </div>
            </div>
        </main>
    </article>

);
}
}

我試圖縮短我的代碼，因為其他字段幾乎相同。 如果有人能幫助我，我會很高興的！

Answer 1

試試這個，你應該調用你的用戶API來獲取componentDidMount中的注冊用戶信息，我還在MaskInput標簽中添加了默認值代碼，這對你有用

class Register extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
        email: '',
        telephone:''

    }
}
componentDidMount  = () => {
    //call your API and set value in email and telephone
    // Below are the sample code for call API, it will change as per your use
    const myHeaders = new Headers();

    myHeaders.append('x-api-key', 'KEY_HERE');
    myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');
    myHeaders.append('cache-control', 'no-cache')

    fetch('URL_HERE', {
        method: 'GET',
        headers: myHeaders,
        async: true,
    }).then(res => res.json())
        .then(json => {
            //check your json response and find email and telephone and then set it to our state
           //Below I have set state, you have to set this state as per your response                  
            this.setState({
                email: json.email,
                telephone: json.telephone,
            })
        });
}

onEmailChange = (event) => {
    this.setState({email: event.target.value})
}

onTelephoneChange = (event) => {
    this.setState({telephone: event.target.value})
}

render () {
return (
  <article className="br3 ba b--black-10 mv4 w-100 w-50-m w-30-l shadow-5 center">  
            <main className="pa4 black-80">
            <div className="measure">
                <fieldset id="email" className="ba b--transparent ph0 mh0">
                    <div className="mt3">
                        <label className="db fw6 lh-copy f6">Email</label>
                        <MaskedInput
                            value={this.state.email} 
                            className="  borderColour pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" 
                            placeholder='john@email.com'
                            id="email"
                            required
                            onChange={this.onEmailChange}
                            /> 
                        <label className="db fw6 lh-copy f6">Zona</label>
                            <div className="mv3">
                        <label className="db fw6 lh-copy f6">Telefone</label>
                        <MaskedInput
                            value={this.state.telephone} 
                            className=" borderColour b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
                            placeholder="(41) 99989-0909" 
                            onChange={this.onTelephoneChange}
                            /> 
                    </div>

    </div>
            </div>
        </main>
    </article>

);
}
}