从列表中删除项目后反应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