实现从数组删除笔记功能后React笔记应用无法新增展示笔记求助

核心问题排查点及修复代码 #

• 状态更新违反不可变原则
  React状态修改必须返回全新的引用，若删除逻辑直接修改原notes数组（调用splice、直接修改数组项等），会导致React无法检测到状态变更，后续所有状态更新都不会触发重渲染。
  错误代码示例：

  const deleteNote = (id) => {
    const targetIndex = notes.findIndex(item => item.id === id)
    notes.splice(targetIndex, 1)
    setNotes(notes)
  }
  

  正确代码（用filter返回新数组）：

  const deleteNote = (id) => {
    setNotes(prev => prev.filter(item => item.id !== id))
  }
  

• 新增笔记状态更新逻辑错误
  新增笔记时未正确展开原有数组，会导致旧笔记被覆盖，表现为新增失效。需采用函数式更新获取最新的状态快照，避免闭包问题：

  const addNote = (newNote) => {
    setNotes(prev => [...prev, newNote])
  }
  

• 列表渲染key属性异常
  若渲染NoteItem时使用数组索引作为key，删除笔记后索引偏移会导致React复用错误组件实例，出现展示异常。需使用笔记自身的唯一ID作为key：

  {notes.map(item => <NoteItem key={item.id} note={item} deleteNote={deleteNote} />)}
  

• 删除事件绑定错误
  若NoteItem内删除按钮的onClick直接调用删除函数而非传递函数引用，会在组件渲染时直接触发删除逻辑，导致刚新增的笔记被立即删除，表现为新增失效：
  错误写法：

  <button onClick={deleteNote(note.id)}>删除</button>
  

  正确写法：

  <button onClick={() => deleteNote(note.id)}>删除</button>
  

• 新笔记唯一ID重复
  新增笔记时未生成唯一ID，删除逻辑按ID过滤时会匹配到多条笔记，导致新增内容被直接过滤。生成新笔记时需确保ID唯一：

  // CreateNote组件内生成新笔记
  const newNote = {
    id: Date.now(),
    content: 输入框内容
  }
  

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