通过 React 从 mongoDB 检索数据

Posted 2023-03-07

【中文标题】通过 React 从 mongoDB 检索数据

【英文标题】：Retrieving data from the mongoDB through React

【发布时间】：2019-03-20 06:33:40

【问题描述】：

我正在 Node、React 和 MongodDB(mongoose) 中开发这个简单的应用程序，我可以在其中注册用户，然后我可以编辑用户的信息。问题是，在显示我刚刚注册的内容（编辑组件）时，我被卡住了。我想在 Edit 组件字段中显示用户的信息，这与 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='[e-mail]'
                            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。然后你需要点击这个 API。如果您正在寻找库来执行此操作，您可以使用 expressjs/koa（NodeJS Web 框架）+ mongoose（MongoDB 对象建模工具）。我希望我的问题是正确的:)

【参考方案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='[e-mail]'
                            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>

);