ReactJS添加Modal后删除按钮无法读取正确待删id问题修复

安全阿岳

2026-8-27

问题根因

每次触发删除都删掉最新条目的核心原因是：仅用布尔值控制Modal显隐，没有在状态里存储当前待删除的目标条目ID。
你的Modal是全局单实例，列表渲染时所有删除按钮共用同一个开关状态，Modal内读取的data.id永远是列表最后一次渲染时绑定的最新条目ID，和你实际点击的删除按钮所属条目完全不匹配，自然无法删除目标项。

修复步骤

1. 调整状态定义

把原来单纯存开关布尔值的状态，改成存储待删除条目ID，ID为空时代表Modal关闭：

// null 表示Modal关闭，有值时存储待删除的条目ID，同时控制Modal显隐
const [deleteTargetId, setDeleteTargetId] = useState(null);

2. 修改删除按钮的点击逻辑

列表渲染时，每个条目的删除按钮点击后，要把当前条目的ID存入状态再打开Modal，不要只做开关切换：

// 打开删除确认框：传入当前要删除的条目ID
const openDeleteConfirm = (id) => setDeleteTargetId(id);
// 关闭确认框：清空待删除ID
const closeDeleteConfirm = () => setDeleteTargetId(null);

// 列表map渲染每一项时，删除按钮绑定当前项的ID
<button onClick={() => openDeleteConfirm(currentItem.id)}>
  <MdIcons.MdDelete color='black' fontSize="1.3rem"/>delete
</button>

3. 调整Modal组件逻辑

Modal的显隐用deleteTargetId是否有值判断，确认删除时直接读取状态里存的目标ID，删除完成后关闭Modal：

<Modal isOpen={!!deleteTargetId} toggle={closeDeleteConfirm}>
  <ModalHeader toggle={closeDeleteConfirm}>Warning</ModalHeader>
  <ModalBody>Are you sure to delete this entry (ID: {deleteTargetId}) from the list?</ModalBody>
  <ModalFooter>
    <Button onClick={() => {
      onDelete(deleteTargetId);
      closeDeleteConfirm();
    }}>YES</Button>
    <Button onClick={closeDeleteConfirm}>Cancel</Button>
  </ModalFooter>
</Modal>

额外注意