1

我是 React.js 的新手,目前正在做我的大学项目。基本上,我的注册 api 已经完成并成功,但是现在,我如何调用 api 来响应前端?我已经回顾了一些来自 youtube 和 stackoverfloe 的例子,但我仍然坚持在这里。下面我将详细描述我目前的情况:

这是我在邮递员上得到的结果。 在此处输入图像描述

所以我的 API 没有问题。

这是我如何调用我的 API 来响应前端:

    handleSubmit(event){

        const {
            name,
            email,
            UserMobile,
            Password,
            confirmPassword,
            Organisation_Name,
            Address,
            description
        } = this.state;
        console.log(this.state)

        axios({
            method: 'post',
            url: 'http://localhost:9000/api/users/sign-up',
            data: {
                name: name,
                email: email,
                UserMobile: UserMobile,
                Password: Password,
                confirmPassword: confirmPassword,
                Organisation_Name: Organisation_Name,
                Address: Address,
                description: description
            },
            }).catch(error => {
                console.log(error);
            }).then(response => {
                console.log(response);
            });
        }

这是一些源代码:

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input 
                        type="type" 
                        name="name" 
                        placeholder="name" 
                        value={this.state.name || ''} 
                        onChange={this.handleChange} 
                        required
                    />

                    <input 
                        type="email" 
                        name="email" 
                        placeholder="email" 
                        value={this.state.email} 
                        onChange={this.handleChange} 
                        required
                    />

                    <input 
                        type="text" 
                        name="UserMobile" 
                        placeholder="UserMobile" 
                        value={this.state.UserMobile || ''} 
                        onChange={this.handleChange} 
                        required
                    />

                    <input 
                        type="Password" 
                        name="Password" 
                        placeholder="Password" 
                        value={this.state.Password || ''} 
                        onChange={this.handleChange} 
                        required
                    />

                    <input 
                        type="Password" 
                        name="confirmPassword" 
                        placeholder="confirmPassword" 
                        value={this.state.confirmPassword || ''} 
                        onChange={this.handleChange} 
                        required
                    />

                    <input 
                        type="Organisation_Name" 
                        name="Organisation_Name" 
                        placeholder="Organisation_Name" 
                        value={this.state.Organisation_Name || ''} 
                        onChange={this.handleChange} 
                        required
                    />

                    <input 
                        type="Address" 
                        name="Address" 
                        placeholder="Address" 
                        value={this.state.Address || ''} 
                        onChange={this.handleChange} 
                        required
                    />

                    <input 
                        type="description" 
                        name="description" 
                        placeholder="description" 
                        value={this.state.description || ''} 
                        onChange={this.handleChange} 
                        required
                    />

                    <button type="Submit">Registration</button>
                </form>
            </div>
        );
    }

package.json(如果需要)

  "name": "react-redux-router",
  "version": "1.0.0",
  "description": "Basic skeleton codebase for React/Redux/Router applications.",
  "proxy": {
    "/connect": {
      "target": "http://localhost:9000",
      "secure": false,
      "changeOrigin": true
    }
  },

那么响应调用 API 是正确的方法吗?为什么我不能得到与邮递员结果相同的结果?新用户也不会进入数据库。希望任何人都可以帮助我并教我解决此类问题。

4

0 回答 0