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

Question

我正在尝试从 React js 中的列表中删除单击项目。但我点击删除按钮，它从列表中删除最后一项，而不是我点击的那个。如果我签入 console.log 它会显示正确的输出，但不能正确呈现。 我试图以许多不同的方式删除项目。这是我的项目代码框链接 https://9o0jw.csb.app/ 我不知道我做错了什么 这是我的代码 sn-p

{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