調用 function 響應節點 js 錯誤 400

Question

我嘗試使用 axios 從反應前端調用一些寄存器到我的 node.js 回來，但我收到 400 錯誤說：

POST http://localhost:9000/user/register 400（錯誤請求）但我看不到我發送到服務器的數據的問題所在。

Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

這是我的代碼：

import React, { useState } from 'react'
import Service from "../../services/Service";
import { Link } from 'react-router-dom';


const Register = () => {

  const user = {
    name: '',
    email: '',
    password: '',
    confirmPassword: '',
  }

  const [userData, setUserData] = useState(user);
  const [error, setError] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleChange = e => {
    setUserData({ ...userData, [e.target.id]: e.target.value })
  }

  const saveUser = e => {
    e.preventDefault();
    const  data = {
      name: user.name,
      email: user.email,
      password: user.password
    };
    Service.signUp(data)
      .then(response => {
        setUserData({
          name: response.data.name,
          email: response.data.email,
          password: response.data.password
        })
        setSubmitted(true);
        console.log(userData)
      })
      .catch(error => {
        setError(error);
        console.log(error);
      })
  }

  const newUser = () => {
    setUserData(user);
    setSubmitted(false);
  }

  const { name, email, password, confirmPassword } = userData;

  const btn = name === '' || email === '' || password === '' || password !== confirmPassword
  ? <button disabled>Inscription</button> : <button>Inscription</button>

  // gestion erreurs
  const errorMsg = error !== '' && <span>{error.message}</span>

  return (

    <div className="signUpLoginBox">
      <div className="slContainer">
        <div className="">
          <div className="formContent">
            <form onSubmit={saveUser}>

              {errorMsg}

              <h2>Inscription</h2>
              <div className="inputBox">
                <input type="text" id="name" onChange={handleChange} value={name} autoComplete="off"  />
                <label htmlFor="pseudo">Name</label>
              </div>

              <div className="inputBox">
                <input type="email" id="email" onChange={handleChange} value={email} autoComplete="off" required />
                <label htmlFor="email">Email</label>
              </div>

              <div className="inputBox">
                <input type="password" id="password" onChange={handleChange} value={password} autoComplete="off" required />
                <label htmlFor="password">Mot de passe</label>
              </div>
              <div className="inputBox">
                <input type="password" id="confirmPassword" onChange={handleChange} value={confirmPassword} autoComplete="off" required />
                <label htmlFor="confirmPassword">Confirmez le mot de passe</label>
              </div>

              {btn}

            </form>
            <div className="linkContainer">
              <Link className="simpleLink" to="/login">Déjà inscrit? Connectez-vous </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Register

我的身份驗證文件 node.js：

const router = require('express').Router();
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/User');
const { registerValidation, loginValidation } = require('./validation');


router.post('/register', async (req, res) => {
  //LETS VALIDATE THE DATA BEFORE WE A USER
  const {error} = registerValidation(req.body);
  if (error) return res.status(400).send(error.details[0].message);

  //Checking if the user is already in the database
  const emailExist = await User.findOne({email: req.body.email})
  if(emailExist) return res.status(400).send('Email already exists');

  //Hash passwords
  const salt = await bcrypt.genSalt(10);
  const hashedPassword = await bcrypt.hash(req.body.password, salt);

  //Create a new user
  const user = new User({
    name: req.body.name,
    email: req.body.email,
    password: hashedPassword
  });
  try{
    const savedUser = await user.save();
    res.send( {user: user._id});
  }catch(err){
    res.status(400).send(err);
  }
});

然后在我的 app.js（節點）中是這樣的：

const createError = require('http-errors');
const express = require('express');
const dotenv = require('dotenv');
const mongoose = require('mongoose');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const cors = require('cors');
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');
const testAPIRouter = require('./routes/testAPI');
const disneyCharacterRouter = require('./routes/disneyCharacter');
const authRoute = require('./routes/auth');
const postRoute = require('./routes/posts');

const app = express();


dotenv.config();

//Connect to DB
mongoose.connect(process.env.DB_CONNECT, { useNewUrlParser: true }, () =>
    console.log('connected to DB!')
);


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(cors());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


//Route Middleware
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/testAPI', testAPIRouter);
app.use('/disneyCharacter', disneyCharacterRouter);
app.use('/user', authRoute);
app.use('/posts', postRoute);

Validation.js（節點）：

 const Joi = require('@hapi/joi');

//Register Validation
const registerValidation = (data) => {
  const schema = Joi.object({
    name: Joi.string()
      .min(6)
      .required(),
    email: Joi.string()
      .min(6)
      .required()
      .email(),
    password: Joi.string()
      .min(6)
      .required()
  });
  return schema.validate(data);
};

http-common.js 文件：

import axios from "axios"

export default axios.create({
  baseURL: "http://localhost:9000",
  headers: {
    "Content-type": "application/json"
  }
});

服務.js：

 import http from "../http-common";

    const signUp = data => {
      return http.post('/user/register', data);
    };

你看到問題了嗎？

Answer 1

好的，我找到了一個解決方案，我真的不知道為什么，但是我的 function handleChange：

const handleChange = e => {
    setUserData({ ...userData, [e.target.id]: e.target.value })
  } 

不是什么都不做，所以我像這樣改變它：

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');


  const saveUser = e => {
    e.preventDefault();
    const  data = {
      name: name,
      email: email,
      password: password
    };
    fetch('http://localhost:9000/user/register', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    console.log(JSON.stringify(data));
  }

你可以這樣寫來保留 axios 版本：

  const saveUser = e => {
    e.preventDefault();
    const  data = {
      name: name,
      email: email,
      password: password
    };
    Service.signUp(JSON.stringify(data))
      .then(
        setSubmitted(true),
        console.log(JSON.stringify(data))
      )
      .catch(error => {
        setError(error);
        console.log(error);
      })
  }

和形式：

      <div className="inputBox">
        <input type="text" id="name" name="name" onChange={e => setName(e.target.value)} value={name} autoComplete="off"  />
        <label htmlFor="pseudo">Name</label>
      </div>

      <div className="inputBox">
        <input type="email" id="email" name="" onChange={e => setEmail(e.target.value)} value={email} autoComplete="off" required />
        <label htmlFor="email">Email</label>
      </div>

      <div className="inputBox">
        <input type="password" id="password" onChange={e => setPassword(e.target.value)} value={password} autoComplete="off" required />
        <label htmlFor="password">Mot de passe</label>
      </div>
      <div className="inputBox">
        <input type="password" id="confirmPassword" onChange={e => setConfirmPassword(e.target.value)} value={confirmPassword} autoComplete="off" required />
        <label htmlFor="confirmPassword">Confirmez le mot de passe</label>
      </div>

這是工作。