从列表中删除项目后，反应 JS 无法正确呈现

Question

我正在尝试从 React JS 中的列表中单击时删除项目。 但是我单击"删除"按钮，它会从列表中删除最后一个项目，而不是我单击的项目。 如果我签入控制台.log它会显示正确的输出，但无法正确呈现。 我尝试以许多不同的方式删除项目。这是我的 Poroject 的代码沙盒链接 https://9o0jw.csb.app/我不知道我做错了什么 这是我的代码片段

{projects &&
projects.map((project, key) => (
<div
key={`editProject-${key}`}
className="d-sm-flex justify-content-between align-items-center mb-2"
>
<div className="flex-sm-fill">
<div className="project-input-field">
<input type="text" defaultValue={project.title} />
</div>
<div className="project-input-field">
<input type="url" defaultValue={project.link} />
</div>
</div>
<div className="remove-project">
<button onClick={() => removeProject(project.title)}>
Remove Projoect
</button>
</div>
</div>
))}

这是删除功能

const removeProject = title => {
// let newProjects = projects;
// newProjects = newProjects.filter(project => project.title !== title);
// setProjects(newProjects);
setProjects(prevProject => {
return prevProject.filter(pro => pro.title !== title);
});
};

Answer 1

我会看看key={`editProject-${key}`}- 你正在使用数组索引，所以 react 认为删除的键是它重新渲染时的最后一个索引。如果project.title是唯一的，则将其用作key。

但是，如果project.title不是唯一的，则在创建project时创建唯一的id。

更多信息 https://reactjs.org/docs/lists-and-keys.html