Невозможно опубликовать данные в Express с помощью React - PullRequest
Новая
       7

Невозможно опубликовать данные в Express с помощью React

0 голосов
/ 22 ноября 2018

Я впервые пытаюсь создать приложение с полным стеком.У меня уже есть опыт работы с 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");

Я уже пытался сделать некоторые почтовые запросы, используя бессонницу.Все они работали, но когда я делаю запрос на публикацию с использованием реакции, он создает объект, но его имя, адрес электронной почты, поля пароля пусты, как здесь: 

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

Я получаю код 200 на консоли 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>
    )
}

}

Ответы [ 3 ]

0 голосов
/ 22 ноября 2018

Здесь есть ряд потенциальных проблем.Во-первых, здесь нет особой необходимости отправлять формы в формате 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 })
})
0 голосов
/ 22 ноября 2018

Все работает из коробки только с голым fetch.Вот gist , просто убедитесь, что вы прикрепили bodyParser к экспресс-экземпляру 

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

axios lib. Это полезно, если вы хотите загружать физические файлы с помощью FormData

0 голосов
/ 22 ноября 2018

Вы используете [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 во время ввода.

...