React+Firestore实现CRUD删除功能时ID获取错误，始终删除表格末位记录

核心错误点 #

• id状态初始值类型错误，你声明时赋值为空字符串，但实际存储的是Firestore返回的id对象数组，取值逻辑本身存在异常
• 删除按钮绑定事件时直接传入了整个id数组，没有取当前行对应的id值，mui-datatables提供的tableMeta.rowIndex可以拿到当前行索引，用索引即可匹配到对应行的id
• 重复监听empleado集合，且setData时累加旧数据没有清空，会导致data和id数组顺序不匹配、数据重复

修改后完整代码 #

import React,{useEffect} from 'react';
import "../../../css/employee.css";
import Dashboard from '../Dashboard';
import { db } from '../../../firebase';
import MUIDataTable from "mui-datatables";
import Form from 'react-bootstrap/Form';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';

function Employee(){
  const [data,setData] = React.useState([]);
  // 修正id初始值为数组
  const[id,setId]=React.useState([]);
  const[dleted,setDleted]=React.useState('');
  
  const handleDelete = async(targetId) =>{
    console.log(targetId)
    try {
      await db.collection('empleado').doc(targetId).delete();
      // 删除成功后同步更新本地数据，避免页面残留
      setId(prev => prev.filter(item => item.id !== targetId))
      setData(prev => prev.filter((_, index) => id[index].id !== targetId))
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(()=>{
    // 合并两个重复的监听，避免数据顺序不一致
    const unsubscribe = db.collection('empleado')
    .onSnapshot((querySnapshot) =>{ 
      const newData = []
      const newId = []
      querySnapshot.forEach(doc =>{
        newId.push({id: doc.id, data:doc.data()})
        newData.push([doc.data().tipoDoc,doc.data().doc,doc.data().lugarExp,doc.data().nombre,doc.data().direccion, doc.data().telefono,doc.data().email,doc.data().cargo,doc.data().rh,doc.data().eps,doc.data().tiempoPago,doc.data().sueldo])
      })
      // 一次性更新数据，避免累加旧数据
      setData(newData)
      setId(newId)
    })
    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe()
  },[]);
  const columns =[{
    name: "Delete",
    options: {
      filter: true,
      sort: false,
      empty: true,
      customBodyRender: (value, tableMeta, updateValue) => {
        return (
          // 通过行索引取对应id
          <button  onClick={ ()=>handleDelete(id[tableMeta.rowIndex].id)}> 
            Delete
          </button>
        );
      }
    }
  },
   "TIPO DOCUMENTO", "DOCUMENTO", "LUGAR EXPEDICION", "NOMBRE","DIRECCION","TELEFONO","EMAIL","CARGO","RH","EPS","TIEMPO SUELDO","SUELDO"];

 const options = {
   filterType: 'checkbox',
 };


  return(
    <div id="employ">
      <div><Dashboard /></div>
      <hr/>
      <div style={{marginLeft:'18em'}}>
        <MUIDataTable 
          title={"EMPLEADOS"} 
          data={data} 
          columns={columns} 
          options={options} 
        />
      </div>
    </div>
  );
}
export default Employee;

内容的提问来源于stack exchange，提问作者Briem Lopez