HTML-JavaScript中列表索引传递问题：员工删除确认功能实现

核心问题分析 #

1. 点击删除按钮时，没有记录当前要删除的员工索引，导致确认框的“确认”按钮不知道要操作哪一项
2. 原删除函数逻辑错误：i!==Y.index 写法错误，Y 是数组本身，不存在index属性，应该对比传入的索引参数

修复步骤及代码 #

1. 新增状态存储待删除的索引

在组件中添加一个状态，专门保存用户要删除的员工索引：

const [deleteIndex, setDeleteIndex] = useState(null);

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

点击删除按钮时，先把当前员工的索引存到状态里，再打开确认框：

<div className='ShowCase'>
  <h2>Οι Υπάλληλοι σας:</h2>
  <ol>
    {Ypalliloi.map((Ypallilos, index) =>
      <li className='list-item' key={index}>
        <span className='OnomaEpitheto'>{Ypallilos.Yname} {Ypallilos.Yepitheto}</span>
        <button className='delete-button' onClick={() => {
          setDeleteIndex(index); // 保存当前要删除的索引
          HandleAddDeleteSure(); // 打开确认弹窗
        }}>Διαγραφή</button>
      </li>
    )}
  </ol>
</div>

3. 修复删除函数的逻辑

修改删除函数，使用存储的索引来过滤数组，删除后记得关闭弹窗并重置索引：

function handleRemoveYpallilos() {
  setYpalliloi(prevList => prevList.filter((_, i) => i !== deleteIndex));
  HandleRemoveDeleteSure(); // 关闭确认弹窗
  setDeleteIndex(null); // 清空存储的索引
}

4. 确认框按钮无需修改参数

确认框的“Ναι”按钮直接调用修复后的删除函数即可，因为索引已经存在状态里了：

<div className='Delete-SureMSG'>
  <span className="icon-close" onClick={HandleRemoveDeleteSure}>
    <IoClose />
  </span>
  <p className='DeleteSureText'>Είστε σίγουρος ότι θέλετε να διαγράψετε αυτόν τον υπάλληλο?</p>
  <div className="button-container">
    <button className='btnNo' onClick={HandleRemoveDeleteSure}>Όχι</button>
    <button className='btnYes' onClick={handleRemoveYpallilos}>Ναι</button>
  </div>
</div>

进阶优化建议 #

如果你的员工对象有唯一标识（比如id字段），建议用唯一ID来代替索引进行删除操作——因为数组索引会随着元素增删发生变化，可能导致删除错误。示例如下：

// 存储待删除的ID
const [deleteId, setDeleteId] = useState(null);

// 删除按钮点击时存储ID
<button className='delete-button' onClick={() => {
  setDeleteId(Ypallilos.id);
  HandleAddDeleteSure();
}}>Διαγραφή</button>

// 删除函数用ID过滤
function handleRemoveYpallilos() {
  setYpalliloi(prevList => prevList.filter(emp => emp.id !== deleteId));
  HandleRemoveDeleteSure();
  setDeleteId(null);
}

内容的提问来源于stack exchange，提问作者Γιωργος Ρετσ