Javascript 从列表中删除项后，无法正确渲染

我正在尝试从react js中的列表中删除单击项。但我点击删除按钮，它会从列表中删除最后一项，而不是我点击的那个项。如果我签入console.log，它会显示正确的输出，但不会正确呈现。 我试着用很多不同的方法删除这个项目。这是我的poroject代码沙盒链接 我不知道我做错了什么 这是我的代码片段

{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>
            ))}

---

我看一下

key={`editProject-${key}}}

-您使用的是数组索引，因此react认为删除的键是重新呈现时的最后一个索引。如果

项目.title

是唯一的，则将其用作

键

但是，如果

project.title

不是唯一的，那么在创建

项目时，请查看创建唯一的
id

更多信息

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