mysql - 使用 Express(REACT、Express | MySql)进行数据库查询的未定义结果
问题描述
我一直在尝试使用来自 React 组件的输入信息,将它们放在 useState 中,然后获取 api url。
.js 来自客户端文件夹:
const [name, setName] = useState('');
const [role, setRole] = useState('');
const [quote, setQuote] = useState('');
const handleProfileSubmit = () => {
fetch("http://localhost:8080/api/profile", {
method: 'POST',
body: JSON.stringify({
name: name,
role: role,
quote: quote
}),
headers: {
'Accept': 'application/json',
'Content-type': 'application/json; charset=UTF-8'
}
})
.then(res => res.json())
.then(res => console.log(res));
}
这就是我的按钮和输入的样子
<button type="submit" className="tailwind" onClick={handleProfileSubmit}>Save</button>
<input className="tailwind" type="text" placeholder="Your name here" onChange={(e) => {setName(e.target.value)}}/>
在我的服务器文件夹中,我使用了 express.js,我在其中连接到 MySql 并将我的变量从客户端发布到查询中。但是当我运行脚本时,我的控制台日志给了我一个简单的“未定义”作为查询的结果。
.js 来自服务器文件夹:
const express = require('express');
const app = express();
const mysql = require('mysql');
const cors = require('cors');
const database = mysql.createPool({
host: "xxxxxxxxxx",
user: "xxxxxxxxx",
password: "xxxxxxxxx",
database: "xxxxxxxxxx",
});
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({
extended: true
}));
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "https://localhost:3000");
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});
app.get("/api/*", (req, res) => {
res.send("hello");
})
app.post("/api/profile", (req, res) => {
const name = req.body.name
const role = req.body.role
const quote = req.body.quote
const sqlInsert = "INSERT INTO user_list (name, role, quote) VALUES (?,?,?);"
database.query(sqlInsert,[name, role, quote] , (err, result) => {
console.log(result)
});
});
我对 Express 很陌生,对 React.js 也很陌生,所以我可能错过了一些简单的东西,但似乎找不到。
提前致谢!
编辑: 当我在控制台中记录变量名称、角色和引用时,我确实得到了值,但没有任何东西插入到我的数据库中。
解决方案
推荐阅读
- java - 在 Java 中访问 Scala 元组元素的正确方法是什么?
- javascript - 使用二级索引从 dynamoDB 获取数据
- php - 如何为新用户生成具有随机 ID 的 URL 并使它们有效
- r - 根据单元格中的值检索列名
- node.js - Passport (oAuth2) 如何与 GraphQL (TypeGraphQL) 一起使用?
- c++ - 静态变量与静态成员
- javascript - 编译的 typescript 和 vanilla javascript 之间的不同内存使用情况
- c# - Null 条件和 ToString 一起给出了意想不到的结果
- html - 将 CSV 转换为 HTML 文件,但如何在电子邮件正文中用颜色突出显示成功和失败的列
- if-statement - Verilog:如果没有 else 在时钟总是块内创建寄存器保持路径