英文:
Why is my full stack app inputting 0s into the MySQL database instead of form values?
问题
以下是您要翻译的内容:
这是我的前端,我在其中使用Formik创建表单并从用户获取输入。
这是我用来从前端获取数据并将其输入到数据库的路由。
这是我用来将数据输入到数据库的模型文件。
这是我单击前端的"Create Profile"按钮后,数据库中的样子。
这是我表单的输入内容。
我尝试在线搜索这个问题,看看是否有人已经处理过这个问题,但是目前还没有任何结果。我看到一个用户使用php而不是express.js作为后端的帖子,链接如下:链接。我查看了它,但是不确定如何将他们的问题的解决方案应用到我的项目中。
希望这可以帮助您解决问题。如果您需要更多信息或有任何问题,请随时告诉我。
英文:
This is my front end, where I use Formik to create a form and get input from the user.
import React from 'react'
import {Formik, Form, Field, ErrorMessage} from "formik"
import axios from "axios";
import * as Yup from "yup";
import { useNavigate } from 'react-router-dom';
function PatientRegistration() {
let navigate = useNavigate();
const initialValues = {
patient_email: "",
first_name: "",
last_name: "",
streetname: "",
city: "",
state: "",
zipcode: "",
sex: "",
gender: "",
age: "",
date_of_birth: "",
phone_number: "",
profession: "",
card_number: "",
expiration_date: "",
insurance_name: "",
policy_num: "",
group_num: "",
copay: "",
pharmacy_name: "",
pharmacy_streetname: "",
pharmacy_city: "",
pharmacy_state: "",
pharmacy_zipcode: ""
};
const validationSchema = Yup.object().shape({
patient_email: Yup.string().email().required("Must enter an email!"),
first_name: Yup.string().required("Must enter your first name!"),
last_name: Yup.string().required("Must enter your last name!"),
streetname: Yup.string().required("Must enter the street name of your home address!"),
city: Yup.string().required("Must enter the city of your home address"),
state: Yup.string().required("Must enter the state of your home address"),
zipcode: Yup.string().required("Must enter the zipcode of your home address"),
sex: Yup.string().required("Must enter your sex!"),
gender: Yup.string().required("Must enter your gender!"),
age: Yup.string().required("Must enter your age!"),
date_of_birth: Yup.string().required("Must enter your date of birth"),
phone_number: Yup.string().required("Must enter your phone number!"),
profession: Yup.string().required("Must enter your profession!"),
card_number: Yup.string().required("Must enter your credit card number!"),
expiration_date: Yup.string().required("Must enter your card's expiration date!"),
insurance_name: Yup.string().required("Must enter the insurance company you use!"),
policy_num: Yup.string().required("Must enter the policy number!"),
group_num: Yup.string().required("Must enter the group number!"),
copay: Yup.string().required("Must enter the copay amount"),
pharmacy_name: Yup.string().required("Must enter the pharmacy name!"),
pharmacy_streetname: Yup.string().required("Must enter the street name of your pharmacy!"),
pharmacy_city: Yup.string().required("Must enter the city of your pharmacy!"),
pharmacy_state: Yup.string().required("Must enter the state of your pharmacy!"),
pharmacy_zipcode: Yup.string().required("Must enter the zipcode of your pharmacy!")
});
const onSubmit = (data) => {
axios.post("http://localhost:3001/register/patient", data, {
headers: {
accessToken: sessionStorage.getItem("accessToken")
}
}).then((response) => {
if(response.data.error) {
console.log("Failed to create Patient Profile");
console.log(response.data.error);
alert(response.data.error);
} else {
console.log(typeof data.copay);
console.log("Successfully created Patient Profile");
alert("Successfully created Patient Profile");
//navigate("/doctor/home");
}
});
};
return (
<div className="PatientRegistrationPage">
<h1>Register Your Information:</h1>
<br />
<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
<Form>
<label>Email: </label>
<ErrorMessage name="patient_email" component="span"/>
<Field autoComplete="off" id="patient_email" name="patient_email" placeholder="(Ex. johnsmith@gmail.com...)" />
<label>First Name: </label>
<ErrorMessage name="first_name" component="span"/>
<Field autoComplete="off" id="first_name" name="first_name" placeholder="(Ex. John...)"/>
<label>Last Name: </label>
<ErrorMessage name="last_name" component="span"/>
<Field autoComplete="off" id="last_name" name="last_name" placeholder="(Ex. Smith...)"/>
<br />
<br />
<label>Home Street Name: </label>
<ErrorMessage name="streetname" component="span"/>
<Field autoComplete="off" id="streetname" name="streetname" placeholder="(Ex. 100 James St.)"/>
<label>Home City: </label>
<ErrorMessage name="city" component="span"/>
<Field autoComplete="off" id="city" name="city" placeholder="(Ex. Brooklyn...)"/>
<label>Home State: </label>
<ErrorMessage name="state" component="span"/>
<Field autoComplete="off" id="state" name="state" placeholder="(Ex. New York...)"/>
<label>Home ZipCode: </label>
<ErrorMessage name="zipcode" component="span"/>
<Field autoComplete="off" id="zipcode" name="zipcode" placeholder="(Ex. 11201...)"/>
<br />
<br />
<label>Sex: </label>
<ErrorMessage name="sex" component="span"/>
<Field autoComplete="off" id="sex" name="sex" placeholder="(Ex. Male...)"/>
<label>Gender: </label>
<ErrorMessage name="gender" component="span"/>
<Field autoComplete="off" id="gender" name="gender" placeholder="(Ex. Masculine...)"/>
<label>Age: </label>
<ErrorMessage name="age" component="span"/>
<Field autoComplete="off" id="age" name="age" placeholder="(Ex. 34)"/>
<label>Date of Birth: </label>
<ErrorMessage name="date_of_birth" component="span"/>
<Field autoComplete="off" id="date_of_birth" name="date_of_birth" placeholder="(Format: YYYY-MM-DD)"/>
<label>Phone Number: </label>
<ErrorMessage name="phone_number" component="span"/>
<Field autoComplete="off" id="phone_number" name="phone_number" placeholder="(Format: XXX-XXX-XXXX)"/>
<label>Profession: </label>
<ErrorMessage name="profession" component="span"/>
<Field autoComplete="off" id="profession" name="profession" placeholder="(Ex. Doctor)"/>
<br />
<br />
<label>Card Number: </label>
<ErrorMessage name="card_number" component="span"/>
<Field autoComplete="off" id="card_number" name="card_number" placeholder="(Format: XXXXXXXXXXXXXXXX)"/>
<label>Expiration Date: </label>
<ErrorMessage name="expiration_date" component="span"/>
<Field autoComplete="off" id="expiration_date" name="expiration_date" placeholder="(Format: YYYY-MM-DD)"/>
<br />
<br />
<label>Insurance Name: </label>
<ErrorMessage name="insurance_name" component="span"/>
<Field autoComplete="off" id="insurance_name" name="insurance_name" placeholder="(Ex. United Healthcare)"/>
<label>Policy Number: </label>
<ErrorMessage name="policy_num" component="span"/>
<Field autoComplete="off" id="policy_num" name="policy_num" placeholder="(Fotmat: XXX-XXXX-XXXX)"/>
<label>Group Number: </label>
<ErrorMessage name="group_num" component="span"/>
<Field autoComplete="off" id="group_num" name="group_num" placeholder="(Ex. 123456)"/>
<label>Copay: </label>
<ErrorMessage name="copay" component="span"/>
<Field autoComplete="off" id="copay" name="copay" placeholder="(Format: 34.56)"/>
<br />
<br />
<label>Pharmacy Name: </label>
<ErrorMessage name="pharmacy_name" component="span"/>
<Field autoComplete="off" id="pharmacy_name" name="pharmacy_name" placeholder="(Ex. CVS)"/>
<label>Pharmacy Street Name: </label>
<ErrorMessage name="pharmacy_streetname" component="span"/>
<Field autoComplete="off" id="pharmacy_streetname" name="pharmacy_streetname" placeholder="(Ex. 200 James St.)"/>
<label>Pharmacy City: </label>
<ErrorMessage name="pharmacy_city" component="span"/>
<Field autoComplete="off" id="pharmacy_city" name="pharmacy_city" placeholder="(Ex. Brooklyn...)"/>
<label>Pharmacy State: </label>
<ErrorMessage name="pharmacy_state" component="span"/>
<Field autoComplete="off" id="pharmacy_state" name="pharmacy_state" placeholder="(Ex. New York...)"/>
<label>Pharmacy ZipCode: </label>
<ErrorMessage name="pharmacy_zipcode" component="span"/>
<Field autoComplete="off" id="pharmacy_zipcode" name="pharmacy_zipcode" placeholder="(Ex. 11201...)"/>
<br />
<br />
<button type="submit">Create Profile</button>
</Form>
</Formik>
</div>
)
}
export default PatientRegistration
Here is the route I use to get the data from the front end and input it into my database.
Register.js (route)
const express = require('express');
const router = express.Router();
const Doctor = require('../models/Doctor.js');
const Patient = require('../models/Patient.js');
const { validateToken } = require("../middleware/auth.js");
const bcrypt = require('bcrypt');
router.post("/", async (req, res) => {
const {doctor_email, first_name, last_name, passcode, phone_number, office_streetname, office_city, office_state, office_zipcode} = req.body;
bcrypt.hash(passcode, 10).then((hash) => {
const info = [doctor_email, first_name, last_name, hash, phone_number, office_streetname, office_city, office_state, office_zipcode];
const theDoctor = new Doctor();
theDoctor.insert(info);
res.send("Sucessfully created doctor profile");
});
});
router.post('/patient', validateToken, async (req, res) => {
// console.log(req.body);
const patientData = req.body;
const thePatient = new Patient();
thePatient.insert(patientData);
res.send("Successfully created patient profile!");
});
module.exports = router;
Patient.js (model - file where I make the SQL query to input data into the database)
const db = require('../connection');
module.exports = class Patient {
constructor(newPatient) {
if (newPatient != null) {
this.patient_email = newPatient.patient_email;
this.first_name = newPatient.first_name;
this.last_name = newPatient.last_name;
this.streetname = newPatient.streetname;
this.city = newPatient.city;
this.state = newPatient.state;
this.zipcode = newPatient.zipcode;
this.sex = newPatient.sex;
this.gender = newPatient.gender;
this.age = newPatient.age;
this.date_of_birth = newPatient.date_of_birth;
this.phone_number = newPatient.phone_number;
this.card_number = newPatient.card_number;
this.expiration_date = newPatient.expiration_date;
this.insurance_name = newPatient.insurance_name;
this.policy_num = newPatient.policy_num;
this.group_num = newPatient.group_num;
this.copay = newPatient.copay;
this.pharmacy_name = newPatient.pharmacy_name;
this.pharmacy_streetname = newPatient.streetname;
this.pharmacy_city = newPatient.pharmacy_city;
this.pharmacy_state = newPatient.pharmacy_state;
this.pharmacy_zipcode = newPatient.pharmacy_zipcode;
}
}
insert(values) {
const sql = "INSERT INTO Patient VALUES (?);";
console.log(values);
console.log(Object.keys(values).length);
db.query(sql, [values], (err, result) => {
if (err) {
// console.log(values);
throw err;
}
console.log(result);
console.log("Insert Success");
});
}
The picture attached to this post shows what my database looks like after I click the Create Profile button on the front end.
Here is the input I had for the form:
{
patient_email: 's8@g',
first_name: 's@g',
last_name: 's@g',
streetname: 's@g',
city: 's@g',
state: 's@g',
zipcode: 's@g',
sex: 's@g',
gender: 's@g',
age: 's@g',
date_of_birth: 's@g',
phone_number: 's@g',
profession: 's@g',
card_number: 's@g',
expiration_date: 's@g',
insurance_name: 's@g',
policy_num: 's@g',
group_num: 's@g',
copay: '$9',
pharmacy_name: 's@g',
pharmacy_streetname: 's@g',
pharmacy_city: 's@g',
pharmacy_state: 's@g',
pharmacy_zipcode: 's@g'
}
Any guidance or help would be greatly appreciated. If you need more info or have any questions, lmk and i'll try to respond as soon as I can.
I tried searching this problem up online and seeing if anyone dealt with this issue already; however, I got nothing so far. I saw this one post for a user who used php instead of express.js for their backend: https://stackoverflow.com/questions/19174204/form-submited-with-php-stores-0s. I looked through it; however, I am not sure how I can apply the solution to their problem to my project.
答案1
得分: 0
我认为有一个问题是与 'const sql = "INSERT INTO Patient VALUES (?)' 相关的。可以尝试传递一个具有键值对的对象,作为参数化查询的参数,然后将 SQL 设置为 'INSERT INTO Patient SET ?',将对象作为 db.query 的第二个参数传递吗?我还建议在查询发送之前在控制台上记录生成的 SQL。
英文:
I think there's an issue with the 'const sql = "INSERT INTO Patient VALUES (?)'. Instead of that, can you try passing in an object with key value pairs for the parameterized query, and then set the SQL as 'INSERT INTO Patient SET ?', with the object as the second argument to db.query? I'd also recommend console.logging the SQL that is being generated before the query is sent out.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论