Reactjs 注意：当我使用反向方法时，没有删除项目

我正在用react做一个笔记应用程序。我以相反的方式添加注释，最新注释是第一个注释，但从那时起，如果我单击删除第一个注释，它将删除最后一个注释，反之亦然

在App.jsx上

    function deleteNote(id) {
    console.log(deleteNote);
    setNote(prevNotes=>{
      return prevNotes.filter((noteItem, index)=>{
          return index !== id;
        });
    });
   
  };
return(
<section id='note-container'>
        {[...note].reverse().map((noteItem, index) => {
          return(
          <Note key={index} 
          id={index} 
          title={noteItem.title} 
          content={noteItem.content} 
          onDelete={deleteNote} />
        );
        })}
)
      </section>

函数删除注释（id）{
console.log（deleteNote）；
setNote（prevNotes=>{
返回prevNotes.filter（（noteItem，index）=>{
返回索引！==id；
});
});
};
返回(
{[…注意].reverse（）.map（（注意项，索引）=>{
返回(
);
})}
)

在Note.jsx中

function Note(props) {
 return (
   <div className="note">
     <h1>{props.title}</h1>
     <p>{props.content}</p>
     <button onClick={()=>{props.toggleEdit(props.id)}}>EDIT</button>
     <button onClick={()=>{props.onDelete(props.id)}}>DELETE</button>
   </div>
 );
}

功能说明（道具）{
返回(
{props.title}
{props.content}

{props.toggleEdit（props.id）}>EDIT
{props.onDelete（props.id）}>DELETE
);
}

既然你有一个ID，你应该在过滤条件下使用它

setNote(prevNotes=>{
  return prevNotes.filter((noteItem)=>{
      return noteItem.id !== id; //changed
    });
});

别忘了在便笺中更改ID

<Note key={index} 
    id={noteItem.id}  //changed
    title={noteItem.title} 
    content={noteItem.content} 
    onDelete={deleteNote} 
/>

---

这是因为索引也是反向的

例如：

notes: [{a: 1}: 0, {b: 2}: 1, {c: 3}: 2, {d: 4}: 3]

notesAfterReverse: [{d: 4}: 0, {c: 3}: 1, {b: 2}: 2, {a: 1}: 3]

---

然后您尝试删除第一个便笺，但它的id为最后一个便笺。

@Ehceyn我编辑了答案以同时更改便笺中的id。不要将索引用作id。您可以使用一些随机方法生成id，或者找到另一个唯一标识符，然后您可以以相同的方式使用筛选器