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

Question

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

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");

我已经尝试过使用失眠症进行一些发帖请求。他们都工作了 但是当我使用 react 发出帖子请求时，它会创建一个对象，但它的名称、电子邮件、密码字段为空，如下所示：

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

这是我的反应代码 - 它在提交表单时调用的函数中 - （我已经添加了快速服务器作为代理）：

    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 的初学者

编辑：反应组件

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] 来更新状态。

您 state 期望 name,email,password 但收到 register_name,register_email,register_password。

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

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

---

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

---

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

Answer 2

这里存在一系列潜在问题。首先，这里没有特别需要进行 urlencoded 表单提交：只需使用 JSON。您的提交内容可能类似于：

handleSubmit (e) {
  e.preventDefault()
  const { email, name, password } = this.state
  axios.post('/api/auth/adduser', {
      email,
      name,
      password
    })
    .then(res => /* ... */)
    .catch(err => /* ... */)
}

在服务器上，您可能关注的是res.json 而不是res.send。

const { email, name, password } = req.body
// ...
res.status(201).json({
  email,
  name
})

另外请注意，这些天你不需要bodyParser（你可以只使用express.json()）。

最后，您应该在 handleChange 中使用 event.target.name，因为名称与组件状态中值的名称匹配：

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

简单示例

客户：

const CLEAR_STATE = {
  email: '',
  name: '',
  password: '',
  message: ''
}

export default class App extends Component {
  state = CLEAR_STATE

  handleChange = e => this.setState({
    [ e.target.name ]: e.target.value
  })

  handleSubmit = e => {
    e.preventDefault()
    const { email, name, password } = this.state
    axios.post('/', { email, name, password })
      .then(({ data }) => this.setState({
        ...CLEAR_STATE,
        message: `You sent: ${data.email}, ${data.name}, ${data.password}.`
      }))
      .catch(({ message }) => this.setState({ message }))
  }

  render () {
    return (
      <>
        <form onSubmit={this.handleSubmit}>
          <input
            type='text'
            name='email'
            value={this.state.email}
            onChange={this.handleChange} />
          <input
            type='text'
            name='name'
            value={this.state.name}
            onChange={this.handleChange} />
          <input
            type='password'
            name='password'
            value={this.state.password}
            onChange={this.handleChange} />
          <input type='submit' value='Register' />
        </form>
        {this.state.message && <p>{this.state.message}</p>}
      </>
    )
  }
}

服务器：

app.use(express.json())

app.post('/', (req, res) => {
  const { name, email, password } = req.body
  res.status(201).json({ name, email, password })
})

Answer 3

只需fetch，一切都可以开箱即用。 这里是gist，只要确保你附加了bodyParser 来表达实例

const bodyParser = require('body-parser');
...
app.use(bodyParser.json());

如果你想用 FormData 上传物理文件，axios lib 很有用