在React中使用Axios实现批量删除选中行功能

我通过Axios从MySQL数据库获取数据，在React中渲染为带复选框的表格，已实现表头复选框全选/取消全选功能。现需编写deleteAll()函数，点击Delete按钮时获取所有选中复选框的ID值，传递给API以删除对应记录。以下是我的代码：

import React from "react";
import axios from "axios";
import { useState, useEffect} from "react";
import { Link } from "react-router-dom";
import Table from 'react-bootstrap/Table'
import Dashboard from "../login/dashboard";
import { toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'

const UserGroup = () => {

    const [data, setData] = useState([]);

    function dataRender(item, index) {
        return (
            <tr key={index +1}>
                <td className="text-center"><input 
                        type="checkbox" className="form-check-input"
                        key={item.id}
                        id={item.id}
                        name={item.id}
                        value={item.id}
                        checked={item?.isChecked || false}
                        onChange={handleChange}
                        /></td>
                <td className="text-center">{index + 1}</td>
                <td className="text-center">{item.id}</td>
                <td className="text-left">{item.name_eng}</td>
                <td className="text-right">{item.name}</td>
                <td className="text-center">{(item.active == 1) ? 'Yes' : 'No'}</td>
            </tr>
        )
      }

    useEffect(() =>{
        loadData();
    }, [])

    const loadData = async ()=>{
        await axios.get('http://localhost/sits_api/sysAdmin/userGroup.php')
        .then((result)=>{
            setData(result.data);
        })
    }

    const deleteAll = ()=>{
     // I NEED TO CODE THIS FUNCTION
    }
    
    // 处理全选/单选复选框
    const handleChange = (e) => {
        const {name, checked} = e.target;

        if(name==="allSelect")
            {
                let tempItem = data.map((item) => {
                    return {...item, isChecked: checked }
                });
                setData(tempItem);
            }
        else
            {
                let tempItem = data.map((item) =>
                item.id === name ? {...item, isChecked: checked } : item
                );
                setData(tempItem);
            }
    }

    return(
        <>
            <Dashboard/>

            <div className="div-content">
                <div>
                    <label className="headline">User Groups List</label>
                    <nav className="navbar navbar-expand-bg navbar-light">
                        <div className="container">
                            <Link className="btn btn-primary" to={'/usergroupadd'}>Add New</Link>
                            <Link className="btn btn-danger" to='' onClick={() => {deleteAll()}}>Delete</Link>
                        </div>
                    </nav>                  
                </div>

                <Table striped bordered hover>
                    <thead>
                        <tr>
                            <th className="text-center"><input
                                type="checkbox" className="form-check-input"
                                name="allSelect"
                                checked={data.filter((item) => item?.isChecked !== true).length < 1}
                                onChange={handleChange}
                                /></th>
                            <th className="text-center">#</th>
                            <th className="text-center">ID</th>
                            <th className="text-left">Eng. Name</th>
                            <th className="text-right">الاسم العربى</th>
                            <th className="text-center">Active</th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.map(dataRender)}
                    </tbody>
                </Table>
            </div>
        </>
    );
}
export default UserGroup;

解决方案 #

1. 编写deleteAll()函数：

   • 筛选出所有选中的项，提取ID数组
   • 校验是否有选中项，无则提示用户
   • 调用API批量删除，处理成功/失败逻辑
   • 删除成功后重新加载数据，更新表格

2. 修复Delete按钮问题：原代码使用<Link>标签会触发路由跳转，应改为<button>标签避免不必要的页面刷新。

完整实现代码

const deleteAll = async () => {
    // 筛选出所有选中的项，提取id
    const selectedIds = data.filter(item => item?.isChecked).map(item => item.id);
    
    // 校验是否有选中项
    if (selectedIds.length === 0) {
        toast.warning('请先选择要删除的记录');
        return;
    }

    try {
        // 发送删除请求到API，根据后端要求选择请求方式（POST/DELETE）
        await axios.post('http://localhost/sits_api/sysAdmin/deleteUserGroups.php', {
            ids: selectedIds
        });
        
        toast.success('选中记录已成功删除');
        // 重新加载数据，更新表格
        loadData();
    } catch (error) {
        toast.error('删除失败，请稍后重试');
        console.error('删除错误:', error);
    }
}

// 同时修改Delete按钮为button标签
<button className="btn btn-danger" onClick={deleteAll}>Delete</button>

注意事项

• 确保后端API支持批量接收ID数组进行删除操作
• 根据后端接口要求调整请求方式（如使用axios.delete时需注意参数传递方式，通常需放在params或请求体中）
• 可根据需求添加确认删除的弹窗，避免误操作

内容的提问来源于stack exchange，提问作者Ashraf Atallah