axios.delete仅删除表格最后一个用户而非点击对应用户如何解决

问题根因 #

你当前的问题核心是所有行的删除模态框共用了同一个全局的open状态：

• 你将<DeleteUser />组件放在了遍历用户的map循环内部，每一行用户都会生成一个对应的删除模态框
• 所有模态框的open属性都绑定了同一个状态变量，点击任意行的删除按钮把open设为true后，所有行的模态框都会同时打开
• Material UI的Modal组件默认层级是后渲染的更高，所以你能看到的永远是最后一行用户对应的模态框，点击删除时拿到的自然是最后一个用户的id

修复方案 #

优化状态逻辑，仅用一个全局模态框复用即可，不需要为每行单独生成模态框：

第一步：修改TableComponent的状态逻辑 #

将原来的布尔类型open状态，替换为存储当前选中要删除的用户id：

// 替换你原来的 open 状态定义
const [selectedDeleteId, setSelectedDeleteId] = useState(null);
// 关闭模态框的方法
const handleCloseDeleteModal = () => setSelectedDeleteId(null);

第二步：修改遍历部分的删除按钮逻辑 #

把<DeleteUser />从map循环中移除，删除按钮仅负责赋值要删除的用户id：

{/* 原来的删除按钮部分修改为 */}
<button onClick={() => setSelectedDeleteId(apiData.id)}>
  <AiFillDelete />
</button>

第三步：全局只保留一个DeleteUser组件 #

在整个表格组件的外部（和表格同级）放置唯一的DeleteUser组件：

{/* 表格代码结束后添加 */}
<DeleteUser
  open={!!selectedDeleteId}
  userID={selectedDeleteId}
  onClose={handleCloseDeleteModal}
/>

可选优化：DeleteUser组件补充关闭逻辑 #

删除成功后调用onClose关闭模态框即可：

const handleDeleteUser = (id, onClose) => {
  axios
    .delete(`https://gorest.co.in/public/v1/users/${id}`, {
      headers: {
        Authorization: "Bearer my token goes here",
      },
    })
    .then((response) => {
      console.log(response);
      onClose(); // 删除成功后关闭模态框
      // 这里可以补充刷新用户列表的逻辑
    });
};

const DeleteUser = ({ open, onClose, userID }) => {
  return (
    <Container>
      <Modal open={open} onClose={onClose}>
        <Box sx={style}>
          <h1>确认删除</h1>
          <button onClick={() => handleDeleteUser(userID, onClose)}>Delete</button>
        </Box>
      </Modal>
    </Container>
  );
};

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