React Table v7获取行ID并传递至删除组件用于Axios请求

解决这个问题只需通过组件props传递行ID，在按钮组件中接收并用于Axios请求，具体步骤如下：

1. 在Hook文件中传递行ID给TrashButton #

修改Hook里的Cell渲染逻辑，将row.original._id作为props传入<TrashButton>：

const DeleteHooks = (hook) => {
    hook.visibleColumns.push((columns) => [
      ...columns,
      {
        id: 'delete',
        accessor: () => 'delete',
        Cell: ({row}) => (
          <div onClick={(event) => event.stopPropagation()}>
            {/* 传递当前行ID给删除按钮组件 */}
            <TrashButton rowId={row.original._id} />
          </div>
        )
      }
    ]);
};

2. 修改TrashButton组件接收并使用ID #

调整组件参数解构出rowId，并在删除函数中直接使用该ID拼接请求地址：

const TrashButton = ({ rowId }) => {
  const [isModalOpened, setIsModalOpend, toggleModal] = trashHook();

  const deleteButton = async () => {
    // 使用传入的行ID发起删除请求
    await axios.delete(`Testing/api/resources?_id=${rowId}`);
    setIsModalOpend(false);
  };

  return (
    <>
      <button className="btn btn-danger btn-sm" onClick={toggleModal}>
        <i className="fa fa-trash-can"></i>
      </button>
      <TrashModal 
        show={isModalOpened} 
        handleClose={() => setIsModalOpend(false)}
        handleConfirm={deleteButton} {/* 直接绑定删除函数，简化代码 */}
      /> 
    </>
  );
};

export default TrashButton;

3. 弹窗组件无需修改 #

你的TrashModal组件已正确实现弹窗逻辑，保持现有代码即可：

const TrashModal = ({show, handleClose, handleConfirm}) => {
  return (
    <>
      <Modal show={show} onHide={handleClose} className="Trashmodal">
        <Modal.Header closeButton>
          <Modal.Title>Atención !!</Modal.Title>
        </Modal.Header>
        <Modal.Body>Confirm </Modal.Body>
        <Modal.Footer className="FooterTrash">
          <Button className="btn btn-sm" variant="secondary" onClick={handleClose} autoFocus={true}>Close</Button>          
          <Button className="btn btn-sm btn-primary" onClick={handleConfirm} autoFocus={true}>
            <i className="fa fa-check" aria-hidden="true"></i>Confirm</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

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