首页 > 解决方案 > 使用 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 也很陌生,所以我可能错过了一些简单的东西,但似乎找不到。

提前致谢!

编辑: 当我在控制台中记录变量名称、角色引用时,我确实得到了值,但没有任何东西插入到我的数据库中。

标签: mysqlnode.jsreactjsexpressundefined

解决方案


推荐阅读