React待办列表点击删除按钮仅为对应列表项添加删除线问题求助

问题根因 #

你当前定义的strike是全局单一布尔状态，所有列表项共用该状态判断是否添加删除线，只要触发一次状态变更，所有列表项的判断条件都会同步生效，所以会出现全量加删除线的问题。

修复方案 #

将记录删除线的状态改为存储已标记删除的待办ID集合，使用Set结构可以快速判断当前项是否需要展示删除线。

步骤1：修改状态定义 #

把原来的布尔类型strike状态替换为存储ID的Set：

// 替换原 const [strike, setStrike] = useState(false);
const [strikeIds, setStrikeIds] = useState(new Set());

步骤2：修改deleteItem逻辑 #

点击删除按钮时，仅把对应待办的ID加入标记集合：

const deleteItem = (id) => {
  setStrikeIds(prev => {
    const updatedSet = new Set(prev);
    // 如果需要支持点击切换删除线效果，可增加判断：存在则移除，不存在则添加
    updatedSet.add(id);
    return updatedSet;
  });
  // 原有其他逻辑（比如设置结束时间等）可保留在下方
};

步骤3：修改渲染时的删除线判断条件 #

针对每个列表项单独判断ID是否在标记集合中：

<h3
  style={{
    textDecoration: strikeIds.has(elem.id) ? "line-through" : "none",
  }}
>
  {elem.name}
</h3>

如果后续需要实现点击后真正移除列表项的逻辑，只需在deleteItem中过滤掉对应ID的项更新items数组即可。

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