在react中获取记录的唯一ID号

Question

我正在尝试将数据从数据库中的一个表发送到另一个表。在我的前端，我有一个表，显示我尝试从中复制的表的记录/数据的详细信息。在每条记录上，我都有批准按钮，按下该按钮时，会将一条记录的行数据发送到另一个表。我收到一个错误，其中所有记录都被发送到另一个数据库并且它继续循环。

这是我的前端代码：

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 的批准按钮，情况也是如此。

Answer 1

<td className="buttons">
                                        <button className='Approve' onClick={handleApprove(i)}>Approve</button>
                                        <button className='Delete'>Delete</button>
                                    </td>