Я делаю веб-сайт, на котором я начинаю создавать процесс регистрации. Я создал регистрационную форму и сервер. js файл, используя npm express. Однако это продолжает выдавать эту ошибку, и я не уверен, почему.
Это ошибка
TypeError: Невозможно уничтожить свойство 'email' для 'req.body', поскольку оно не определено.
Все, что я хочу сделать так, чтобы при нажатии кнопки «Отправить» пользователи просто добавлялись в базу данных.
Это сервер. js (ошибка в этом файле из того, что я могу собрать)
const express = require("express");
const sql = require("mssql");
const app = express();
const port = process.env.PORT || 5000;
app.listen(port, () => `Server running on port ${port}`);
const config = {
user: "sas",
password: "Mypassword456",
server: "DEVSQL_2014", // You can use 'localhost\\instance' to connect to named instance
database: "TestDBWebsite"
};
app.post("/admin-Add-Users", function(req, res) {
res.set("Access-Control-Allow-Origin", "*");
const { email, password } = req.body;
let connection = new sql.ConnectionPool(config, function(err) {
let request = new sql.Request(connection);
request.query(
"insert into Login (email, password) values ('" +
password +
"', '" +
email +
"')"
);
});
res.send({ message: "Success" });
});
регистр. js
import React from "react";
import "../bootstrap.min.css";
import logo from "../codestone logo.png";
import { Link } from "react-router-dom";
import Popup from "reactjs-popup";
import { Formik } from "formik";
import * as Yup from "yup";
function Register() {
return (
<div className="App">
<Header />
<DisplayUsersCS />
</div>
);
}
class DisplayUsersCS extends React.Component {
constructor() {
super();
this.state = { users: [] };
this.onSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
var self = this;
// On submit of the form, send a POST request with the data to the server.
fetch("/admin-Add-Users", {
method: "POST",
body: {
email: self.refs.email,
password: self.refs.password
}
})
.then(function(response) {
return response.json();
})
.then(function(body) {
console.log(body);
});
}
render() {
console.log(this.state.users);
return (
<div>
<LoginForm></LoginForm>
<form onSubmit={this.onSubmit}>
<input type="text" placeholder="email" ref="email" />
<input type="text" placeholder="password" ref="password" />
<input type="submit" />
</form>
</div>
);
}
}
const LoginForm = () => (
<Formik
class="form-signin"
action="auth"
method="POST"
initialValues={{ email: "", password: "", passwordConfirm: "" }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
console.log("Logging in", values);
setSubmitting(false);
}, 500);
}}
validationSchema={Yup.object().shape({
email: Yup.string()
.email()
.required("Required")
.matches(/(?=.*codestone)/, "This is not a Codestone email address."),
password: Yup.string()
.required("No password provided.")
.min(8, "Password is too short - should be 8 chars minimum.")
.matches(/(?=.*[0-9])/, "Password must contain a number."),
passwordConfirm: Yup.string()
.required("No password provided.")
.min(8, "Password is too short - should be 8 chars minimum.")
.matches(/(?=.*[0-9])/, "Password must contain a number.")
})}
>
{props => {
const {
values,
touched,
errors,
isSubmitting,
handleChange,
handleBlur,
handleSubmit
} = props;
return (
<form
onSubmit={handleSubmit}
class="form-signin"
action="auth"
method="POST"
>
<div className="jumbotron">
<label htmlFor="email">Email</label>
<input
name="email"
type="text"
placeholder="Enter your email"
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
className={errors.email && touched.email && "error"}
/>
{errors.email && touched.email && (
<div className="input-feedback">{errors.email}</div>
)}
<label htmlFor="email">Password</label>
<input
name="password"
type="password"
placeholder="Enter your password"
value={values.password}
onChange={handleChange}
onBlur={handleBlur}
className={errors.password && touched.password && "error"}
/>
{errors.password && touched.password && (
<div className="input-feedback">{errors.password}</div>
)}
<label htmlFor="email">Password Confirmation</label>
<input
name="passwordConfirm"
type="passwordConfirm"
placeholder="Confirm Password"
value={values.passwordConfirm}
onChange={handleChange}
onBlur={handleBlur}
className={
errors.passwordConfirm && touched.passwordConfirm && "error"
}
/>
{errors.passwordConfirm && touched.passwordConfirm && (
<div className="input-feedback">{errors.passwordConfirm}</div>
)}
<button type="submit" action="auth">
Sign Up
</button>
<p>
<Link to="/Login"> Login </Link>
</p>
<p>
<Link to="/reset"> Reset Password </Link>
</p>
</div>
</form>
);
}}
</Formik>
);
function Header() {
return (
<div class="jumbotron">
<img
className="profile-image"
alt="icon"
src={logo}
width="450"
height="80"
/>
</div>
);
}
export default Register;