我正在尝试将数据从数据库中的一个表发送到另一个表。在我的前端,我有一个表,显示我尝试从中复制的表的记录/数据的详细信息。在每条记录上,我都有批准按钮,按下该按钮时,会将一条记录的行数据发送到另一个表。我收到一个错误,其中所有记录都被发送到另一个数据库并且它继续循环。
这是我的前端代码:
import React, { useState, useEffect } from "react";
import axios from "axios";
import '../css/Approve_user.css';
function Approve_user() {
const [pendinguser, setPendinguser] = useState([])
useEffect(()=> {
axios.get('http://localhost:5500/getpendingdata')
.then(res=>setPendinguser(res.data))
.catch(err=>console.log(err))
}, [])
const handleApprove = (i) => {
axios.post('http://localhost:5500/approveduser', i)
.then(res => {
if(res.data.Status === 'Success'){
alert("User Approved Successfully!");
window.location.reload()
}
else{
alert(res.data.Error);
}
})
.catch(err => console.log(err));
}
return(
<section className="Approve_users">
<div className="Approve_title">
<h3>Approve New Users Section</h3>
<h5>Select and Decline Users</h5>
</div>
<div className="pendingusers">
<table>
<thead>
<tr>
<th>Ticket ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Gender</th>
<th>Location</th>
<th>Phone No.</th>
<th>Email</th>
<th>Category</th>
<th>Skill</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{
pendinguser.map((data, i) => (
<tr key={i}>
<td>{data.pending_user_ID}</td>
<td>{data.pending_user_firstname}</td>
<td>{data.pending_user_lastname}</td>
<td>{data.pending_user_username}</td>
<td>{data.pending_user_gender}</td>
<td>{data.pending_user_location}</td>
<td>{data.pending_user_phone_no}</td>
<td>{data.pending_user_email}</td>
<td>{data.pending_user_category}</td>
<td>{data.pending_user_skill}</td>
<td className="buttons">
<button className='Approve' onClick={handleApprove(i)}>Approve</button>
<button className='Delete'>Delete</button>
</td>
</tr>
))
}
</tbody>
</table>
</div>
</section>
)
}
export default Approve_user;
这是我的后端代码:
app.post('/approveduser', (req, res) => {
const sql = "INSERT INTO users(`user_firstname`, `user_lastname`, `user_username`, `user_gender`, `user_location`, `user_phone_no`, `user_email`, `user_password`, `user_category`, `user_profilepic`, `user_skill`) SELECT `pending_user_firstname`, `pending_user_lastname`, `pending_user_username`, `pending_user_gender`, `pending_user_location`, `pending_user_phone_no`, `pending_user_email`, `pending_user_password`, `pending_user_category`, `pending_user_profilepic`, `pending_user_skill` FROM pending_users WHERE pending_user_ID=?";
const approve_ID = req.body.i;
db.query(sql, [approve_ID], (err, result) => {
if(err) return res.json({Error: err});
else return res.json({Status: "Success"});
})
})
假设表格数据用于记录,所以我希望每条记录有两个提交按钮。因此,当我按下记录 A 的批准按钮时,我希望将记录 A 从ending_users 表复制到用户表,如果我按下记录 B 的批准按钮,情况也是如此。
<td className="buttons">
<button className='Approve' onClick={handleApprove(i)}>Approve</button>
<button className='Delete'>Delete</button>
</td>