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"

这是我的反应代码-提交表单时该函数位于一个函子中-（我已经将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

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

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

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

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

请记住，htmlFor元素的属性label也需要与链接的元素的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()）。

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

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

一切简单可用，{@ {1}}即可使用。这是gist，只需确保您附加了bodyParser即可表示实例

fetch

如果要使用FormData上传物理文件，

axios lib很有用

无法使用React

3 个答案:

简单示例