React笔记应用onDeleteNote功能异常 新增笔记重复生成删除按钮

问题根源 #

你在Main.js组件中对全量notes数组做了遍历渲染，每存在一条笔记就会生成一个删除图标，才会出现每新增一条笔记就多一个删除按钮的异常表现。

修复步骤 #

修改Main.js中main-title-block区块的删除按钮渲染逻辑，删掉遍历notes的代码，直接渲染单个删除按钮，点击时传入当前激活笔记的id即可：

// Main.js 原错误代码
{notes.map((note) => (
  <img src={bin} alt="Delete" height={50} width={41} onClick={() => onDeleteNote(note.id)}/>
))}

// 替换为以下代码
<img src={bin} alt="删除" height={50} width={41} onClick={() => onDeleteNote(activeNote.id)}/>

可选优化（推荐） #

删除当前激活的笔记后，建议重置激活状态，避免出现激活笔记不存在的异常逻辑，修改App.js中的onDeleteNote方法：

const onDeleteNote = (noteId) => {
  const filteredNotes = notes.filter((note) => note.id !== noteId);
  setNotes(filteredNotes);
  // 若删除的是当前激活笔记，重置激活状态
  if (noteId === activeNote) {
    setActiveNote(false);
  }
};

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