reactjs-使用 express 和 axios 从 React 表中删除行
我有一个后端服务器同时在 localhost:3001 上运行，前端在 localhost:3000 上运行。我在 React 中创建了一个表，并使用来自后端端点 localhost:3001/food 的数据填充它。
现在我正在尝试为我的表中的删除按钮实现功能，该功能应该根据 id 删除前端上的行和数据库中的行。单击删除按钮时，它会打开一个具有确认删除按钮的模式。单击后，行的 id 将传递给函数。
我不确定如何在后端调用 express 函数来对数据库进行删除查询。我是直接在我的 index.js 文件中执行此操作还是在 axios 中工作？我对 React 很陌生，所以我很感激这方面的帮助！
这是我在 index.js 文件中的表（我省略了一些不必要的代码）：
const DataTable = () => {
return (
<>
<table>
<tbody>
{mapCriterias.map(item => {
return (
<tr key={item.id}>
<td>{ item.id }</td>
<td>{ item.food }</td>
<td>{ renderDeleteButton(item.id) }</td>
</tr>
)
</tbody>
</table>
</>
)
}
我的 renderDeleteButton（也在 index.js 中）：
const renderDeleteButton = (key) => {
let dialogEl=null;
const delete_question = () => {
// this is where my implementation would go
}
return (
<>
// modal
<dialog ref={(el) => {
dialogEl = el;
}}>
<div role="document">
<h2>Are you sure you would like to delete this food?</h2>
<p>This action cannot be undone</p>
<form method="dialog">
<div>
<div>
<button type="reset" onClick={()=>dialogEl.close()}>Cancel</button>
</div>
<div>
<button type="del" id="delete_bottom" onClick {()=>delete_question()}>Delete</button>
</div>
</div>
</form>
</div>
</dialog>
// delete button
<button onClick={() =>dialogEl.showModal()} className="delete-btn">
<span role="img">
<Icon icon="gg:trash-empty"/>
</span>
</button>
</>
)
我的 fetch_db.js 文件：
const express = require('express');
const router = express.Router();
const pool = require('../credentials');
router.get('/', (req, res) =>{
pool.query('SELECT * FROM Food', (error, results) => {
if (error) {
console.log(error)
res.status(500).send('Error')
} else {
res.status(200).send(results.rows)
}
})
});
router.delete('/:foodid', (req, res) => {
pool.query('DELETE FROM Food WHERE foodid=$1', [req.params.foodid], (error, results) => {
if (error) {
console.log(error)
res.status(500).send('Error')
} else {
res.status(200).send('Success')
}
});
我用来从数据库中获取数据以填充我的表的 axios 文件：
import axios from "axios"
axios.defaults.baseURL = "http://localhost:3001"
export const getFoodData = () => {
console.log("retrieved data");
return axios.get("/food");
}
