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

Question

我正在尝试从 React js 的列表中删除单击项目。但我点击删除按钮，它从列表中删除最后一项，而不是我点击的那个。如果我签入 console.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不是唯一的，则在创建 aid时寻找创建唯一的project。

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