[英]Retrieving data from the mongoDB through React
我在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>
);
}
}
我试图缩短我的代码,因为其他字段几乎相同。 如果有人能帮助我,我会很高兴的!
试试这个,你应该调用你的用户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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.