sql - 无法使用 Formik 对 SQL 数据库执行 POST 功能？
问题描述
我在让我的应用程序表单将数据提交到我的 SQL 数据库时遇到问题。
我能够使用 Postman 上的 POST 请求成功插入记录，但无论出于何种原因，我的表单都无法连接到后端。
我对 Java 还很陌生，到目前为止一直在依赖教程，因此我希望有人可能会查看我的代码并在可能的情况下尝试发现问题？
这可能是一个非常愚蠢的错误或我完全错过的东西。
我已经在Github上上传了存储库。
表单的代码如下所示：
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
function CreateAEMonthlySitRep() {
const initialValues = {
attendancest1:"",
attendancest2:"",
attendancesto:"",
fourhourspatientst1:"",
fourhourspatientst2:"",
fourhourspatientsto:"",
fourtwelvehourspatients:"",
twelvehourspatients:"",
emergencyadmissionst1:"",
emergencyadmissionsto:"",
emergencyadmissionst2:"",
admissionstother:"",
};
const validationSchema = Yup.object().shape({
attendancest1: Yup.number().required("You must input a valid number."),
attendancest2: Yup.number().required("You must input a valid number."),
attendancesto: Yup.number().required("You must input a valid number."),
fourhourspatientst1: Yup.number().required("You must input a valid number."),
fourhourspatientst2: Yup.number().required("You must input a valid number."),
fourhourspatientsto: Yup.number().required("You must input a valid number."),
fourtwelvehourspatients: Yup.number().required("You must input a valid number."),
twelvehourspatients: Yup.number().required("You must input a valid number."),
emergencyadmissionst1: Yup.number().required("You must input a valid number."),
emergencyadmissionsto: Yup.number().required("You must input a valid number."),
emergencyadmissionst2: Yup.number().required("You must input a valid number."),
admissionstother: Yup.number().required("You must input a valid number."),
});
const onSubmit = (data) => {
axios.post("http://localhost:3001/maesitrep", data).then((response) => {
console.log("Data added successfully.");
});
};
return (
<div>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossOrigin="anonymous"
/>
<div className="createAEMonthlySitRepPage">
<div className="col-6 mx-auto">
<table className="table table-bordered">
<thead>
<tr>
<th colSpan={10} scope="col"><p className="text-end px-5 pt-2">Attendances by A&E Type</p></th>
</tr>
<tr>
<th scope="col" />
<th scope="col"><center>Type 1</center></th>
<th scope="col"><center>Type 2</center></th>
<th scope="col"><center>Other</center></th>
</tr>
</thead>
<tbody>
<Formik
initialValues={initialValues}
onSubmit={onSubmit}
validationSchema={validationSchema}>
<tr>
<th scope="row"><label>Number of A&E Attendances</label></th>
<td>
<div className="col p-4">
<div className="form-group">
<Form>
<Field
id=""
type="number"
name="attendancest1"
placeholder="0"
/>
<ErrorMessage name="attendancest1" component="span" />
</Form>
</div>
</div>
</td>
<td>
<div className="col p-4">
<div className="form-group">
<Form>
<Field
id=""
type="number"
name="attendancest2"
placeholder="0"
/>
<ErrorMessage name="attendancest2" component="span" />
</Form>
</div>
</div>
</td>
<td>
<div className="col p-4">
<div className="form-group">
<Form>
<Field
id=""
type="number"
name="attendancesto"
placeholder="0"
/>
<ErrorMessage name="attendancesto" component="span" />
</Form>
</div>
</div>
</td>
</tr>
</Formik>
<tr>
</tr>
<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
<tr>
<th scope="row"><label>Number of Patients who have had a total time in A&E of <br />over 4 hours from arrival to discharge,transfer of admission</label></th>
<td>
<div className="col p-4">
<div className="form-group">
<Form>
<Field
id=""
type="number"
name="fourhourspatientst1"
placeholder="0"
/>
<ErrorMessage name="fourhourspatientst1" component="span" />
</Form>
</div>
</div>
</td>
<td>
<div className="col p-4">
<div className="form-group">
<Form>
<Field
id=""
type="number"
name="fourhourspatientst2"
placeholder="0"
/>
<ErrorMessage name="fourhourspatientst2" component="span" />
</Form>
</div>
</div>
</td>
<td>
<div className="col p-4">
<div className="form-group">
<Form>
<Field
id=""
type="number"
name="fourhourspatientsto"
placeholder="0"
/>
<ErrorMessage name="fourhourspatientsto" component="span" />
</Form>
</div>
</div>
</td>
</tr>
</Formik>
<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
<tr>
<th scope="row"><label>Number of patient who have waited 4-12 hours in A&E from <br />decision to admit to admission</label></th>
<td colSpan={3}>
<div className="col-7 p-4 mx-auto">
<div className="form-group">
<Form>
<Field
id=""
type="number"
name="fourtwelvehourspatients"
placeholder="0"
/>
<ErrorMessage name="fourtwelvehourspatients" component="span" />
</Form>
</div>
</div>
</td>
</tr>
</Formik>
<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
<tr>
<th scope="row"><label>Number of patient who have over 12 hours in A&E from <br />decision to admit to admission</label></th>
<td colSpan={3}>
<div className="col-7 p-4 mx-auto">
<div className="form-group">
<Form>
<Field
id=""
type="number"
name="twelvehourspatients"
placeholder="0"
/>
<ErrorMessage name="twelvehourspatients" component="span" />
</Form>
</div>
</div>
</td>
</tr>
</Formik>
</tbody>
</table>
</div>
<div className="col-6 mx-auto">
<table className="table table-bordered">
<thead>
<tr>
<th colSpan={10} scope="col"><p className="text-end px-5 pt-2">Number of Admissions</p></th>
</tr>
</thead>
<tbody>
<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
<tr>
<th scope="row"><label>Emergency Admissions via A&E - Type 1</label></th>
<td colSpan={3}>
<div className="col-6 mx-auto">
<div className="form-group">
<Form>
<Field
id=""
type="number"
name="emergencyadmissionst1"
placeholder="0"
/>
<ErrorMessage name="emergencyadmissionst1" component="span" />
</Form>
</div>
</div>
</td>
</tr>
</Formik>
<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
<tr>
<th scope="row"><label>Emergency Admissions via A&E - Type 2</label></th>
<td colSpan={3}>
<div className="col-6 mx-auto">
<div className="form-group">
<Form>
<Field
id=""
type="number"
name="emergencyadmissionst2"
placeholder="0"
/>
<ErrorMessage name="emergencyadmissionst2" component="span" />
</Form>
</div>
</div>
</td>
</tr>
</Formik>
<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
<tr>
<th scope="row"><label>Emergency Admissions via A&E - Other A&E Department</label></th>
<td colSpan={3}>
<div className="col-6 mx-auto">
<div className="form-group">
<Form>
<Field
id=""
type="number"
name="emergencyadmissionsto"
placeholder="0"
/>
<ErrorMessage name="emergencyadmissionsto" component="span" />
</Form>
</div>
</div>
</td>
</tr>
</Formik>
<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
<tr>
<th scope="row"><label>Other Emergency Admissions</label></th>
<td colSpan={3}>
<div className="col-6 mx-auto">
<div className="form-group">
<Form>
<Field
id=""
type="number"
name="admissionstother"
placeholder="0"
/>
<ErrorMessage name="admissionstothe" component="span" />
</Form>
</div>
</div>
</td>
</tr>
</Formik>
</tbody>
</table>
<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
<Form>
<button type="submit">Save Data</button>
</Form>
</Formik>
</div>
</div>
</div>
);
}
export default CreateAEMonthlySitRep;
路线代码：
const express = require('express');
const router = express.Router();
const { MAESitRep } = require('../models')
router.get("/", async (req, res) => {
const listOfMAESitRep = await MAESitRep.findAll();
res.json(listOfMAESitRep);
});
router.post("/", async (req, res) => {
const post = req.body;
await MAESitRep.create(post);
res.json(post);
});
module.exports = router;
服务器 index.js 代码：
const express = require ("express");
const app = express();
const cors = require('cors');
app.use(express.json());
app.use(cors());
const db = require('./models');
// Routers
const maesitrepRouter = require("./routes/MAESitRep");
app.use("/maesitrep", maesitrepRouter);
db.sequelize
.sync()
.then(() => {
app.listen(3001, () => {
console.log("Server is running on Port 3001");
});
});
任何帮助将不胜感激！
谢谢你。
亲切的问候，
亚当
解决方案
推荐阅读
- github - 在 Github 中使用“使用此模板”创建存储库时，请更新 README
- google-sheets - 如何从另一个谷歌工作簿的参考中获取特定单元格？
- sql - 需要帮助在 Oracle SQL 查询中将行转换为列
- python - 如何在 Tensorflow 中找到神经网络模型梯度的最小点？
- wpf - SQL 重新连接实例 (WPF)
- node.js - Express - 使用多嵌套路由器
- xslt - 如何创建副本然后更新 xslt 中的 1 个标签？
- nestjs - 使用 NestJS Sequelize 访问多对多中的关联模型
- java - 当应用程序处于后台时，android线程一直滞后
- tabulator - 如何在制表器中居中列标题？