React JS CRUD表格删除问题：获取选中项ID并传参

你的核心问题是删除按钮的点击事件没有获取到当前行的正确ID：

• 你传入handleDeleteProduct(info.id)时，info是一个数组，数组本身没有id属性，所以传递的id必然是undefined。
• 你的CRUDTable组件应该是遍历data={info}来渲染每一行，但你直接把一个固定的deleteIcon传给组件，这个图标无法感知当前渲染的是哪一行数据，自然拿不到对应ID。

有两种可行的解决思路，优先推荐第一种（更符合组件设计规范）：

思路1：修改CRUDTable组件，支持传递删除回调 #

把deleteIcon和点击逻辑拆分开，让CRUDTable接收一个onDelete回调函数，组件内部渲染每一行时，把当前行的id作为参数传给这个回调：

父组件修改： #

// 原deleteIcon的props替换成onDelete回调
<CRUDTable
    data={info} 
    link={`/user-projets-details/`} 
    pencilIcon={<IoPencil style={{fontSize: '18px', cursor: 'pointer', color: 'green'}}/>}
    eyeIcon={<IoEyeOutline style={{fontSize: '18px', cursor: 'pointer', color: '#f8c408'}}/>}
    onDelete={handleDeleteProduct} // 传递删除回调
    deleteIcon={<IoTrashOutline style={{fontSize: '18px', color: 'red', cursor: 'pointer'}} />} // 只传图标组件，不带onClick
/>

CRUDTable组件内部修改（假设原组件遍历逻辑如下）： #

const CRUDTable = ({ data, deleteIcon, onDelete }) => {
  return (
    <table>
      {data.map(item => (
        <tr key={item.id}>
          {/* 其他列渲染逻辑 */}
          <td>
            {/* 给图标绑定onClick，传入当前行的id */}
            {React.cloneElement(deleteIcon, { onClick: () => onDelete(item.id) })}
          </td>
        </tr>
      ))}
    </table>
  )
}

思路2：如果无法修改CRUDTable，动态生成带绑定ID的deleteIcon #

如果不能修改CRUDTable组件，可以在生成info数组时，给每个对象添加绑定了当前行ID的deleteIcon：

const info = pendingList.map(item => {
  return {
    id: item._id,
    produit: item.produits,
    marque: item.marque,
    référence: item.référence,
    installation: item.annéeInstallation,        
    entretenu: item.entretenu,
    année: item.selectedYearEntretenu,
    // 给每个条目生成带onClick的删除图标
    deleteIcon: <IoTrashOutline style={{fontSize: '18px', color: 'red', cursor: 'pointer'}} onClick={() => handleDeleteProduct(item._id)} />
  }
});

// 传递给CRUDTable时不再单独传deleteIcon
<CRUDTable
    data={info} 
    link={`/user-projets-details/`} 
    pencilIcon={<IoPencil style={{fontSize: '18px', cursor: 'pointer', color: 'green'}}/>}
    eyeIcon={<IoEyeOutline style={{fontSize: '18px', cursor: 'pointer', color: '#f8c408'}}/>}
/>

你的handleDeleteProduct里更新pendingList时，过滤条件有误：原pendingList中的条目ID是_id，不是id，所以需要修改过滤逻辑：

setPendingList(pendingList.filter(item => item._id !== id));

内容的提问来源于stack exchange，提问作者Ons Jannet