React点击列表项删除按钮仅删除首项问题咨询

问题根因 #

• 你绑定deleteItem事件时没有传入当前项的索引参数，deleteItem接收到的第一个参数实际是点击事件对象，转数值后结果为0，所以每次都会删除数组第一个元素
• 额外优化点：你每个todo项本身已经生成了唯一key属性，列表渲染时不要用index作为key，避免列表重排时出现渲染异常

修复方案 #

修改list.map部分的删除按钮绑定逻辑，给deleteItem显式传入当前索引，同时替换渲染key：

{list.map((item, index) => {
  return (
    <ol key={item.key}>
      {item.text[0].toUpperCase() + item.text.slice(1).toLowerCase()}
      <button>Edit</button>
      <button id="Delete" onClick={() => deleteItem(index)}>
        ✗
      </button>
    </ol>
  );
})}

如果想要更稳妥的删除逻辑，也可以用item的唯一key来匹配删除，避免索引偏移导致的误删：

// 修改deleteItem逻辑
const deleteItem = (targetKey) => {
  updateList((prevState) => prevState.filter(item => item.key !== targetKey));
};

// 绑定事件时传入item.key
<button id="Delete" onClick={() => deleteItem(item.key)}>
  ✗
</button>

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