javascript - 无法使用 React 将数据发布到 Express

Question

这是我第一次尝试制作全栈应用程序。我已经有 Django 的经验，但现在我想尝试使用 Express.js 所以，我在express中做了这个简单的路线:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var logger = require('morgan');

var User = require('../User/User');


app.use(logger("short"));

app.post("/addUser", (req, res) => {
User.create({
    name: req.body.name,
    email: req.body.email,
    password: req.body.password
}, (err, user) => {
    if (err) return res.status(500).json({auth: false})
    res.status(200).json(
        {
            email,
            name
        }
        );
    });
});

这是用户架构:

const mongoose = require("mongoose")
const Schema = mongoose.Schema;

const UserSchema = new Schema(
    {
        name: String,
        email: String,
        password: String,
    },
    {timestamps: true}
);
mongoose.model("User", UserSchema);

module.exports = mongoose.model("User");

我已经尝试使用 insomnia 来执行一些发布请求。他们都工作了 但是当我使用 React 发出发布请求时，它会创建一个对象，但其名称、电子邮件、密码字段为空，如下所示:

createdAt: "2018-11-22T16:59:51.844Z"
updatedAt: "2018-11-22T16:59:51.844Z"
__v: 0
_id: "5bf6e0878bd6663807e57dec"

这是我的 react 代码 - 它位于提交表单时调用的函数中 - (我已经添加了 Express 服务器作为代理):

    axios.post('/api/auth/addUser', {
        name:  register_name,
        email: register_email,
        password: register_password
    })
    .then(res => res.json())
    .catch(err => console.log(err))

我在 Express 控制台上收到代码 200，但 obj 没有任何数据。 你能帮助我吗？ - 我还是 React 和 Express 的初学者

编辑:React 组件

import React, { Component } from 'react';
import axios from 'axios';

export default class Register extends Component {
    constructor(props) {
        super(props)
       this.state = {
        register_name: "",
        register_email: "",
        register_password: ""
    }

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

    }

    handleChange(event) {
        this.setState({[event.target.name]: event.target.value})
    }

    handleSubmit(event) {
    event.preventDefault();
    const { register_name, register_email, register_password } = this.state
    axios.post('/api/auth/addUser', {
        name:  register_name,
        email: register_email,
        password: register_password
    })
    .then(res => res.json())
    .catch(err => console.log(err))

    console.log(this.state)

    this.clearInputs();

}

    render() {
        return (
        <div>
            <form method={"POST"} onSubmit={this.handleSubmit} id={"register-form"}>
                <label htmlFor={"register_name"}></label>
                <input type={"text"} name={"register_name"} id={"register_name"} placeholder={"name"} value={this.state.register_name} onChange={this.handleChange}></input>
                <label htmlFor={"register_email"}>Email</label>
                <input type={"email"} name={"register_email"} id={"register_email"} placeholder={"email"} value={this.state.register_email} onChange={this.handleChange}></input>
                <label htmlFor={"register_password"} >Password</label>
                <input type={"password"} name={"register_password"} id={"register_password"} placeholder={"password"} value={this.state.register_password} onChange={this.handleChange}></input>
                <button type={"submit"}>Submit</button>
            </form>
        </div>
    )
}

}

Answer 1

您正在使用已更改的 input 元素的 [event.target.id] 来更新状态。

您声明需要名称、电子邮件、密码，但收到register_name， 注册电子邮件，注册密码。

您应该更改 input 元素的 id 以匹配状态中的元素，或者您应该使用 name 属性，因为这就是匹配。

this.setState({[event.target.name]: event.target.value});

<小时/>

请记住，label 元素的属性 htmlFor 还需要匹配 id 而不是 name 所链接元素的代码。

<小时/>

此外，您应该已经注意到有些问题，因为您的代码在您键入时不会更新 input 元素。