刪除帶有 api 的組件僅在刷新 Reactjs 后消失

Question

我有一個 spring 引導 api 具有 crud 功能，在我的反應前端我有這個，這是一個儀表板組件，在里面我正在渲染一個 ProjectItem 組件的列表並將它們作為道具傳遞給儀表板組件。

當我刪除一個項目時，我希望它立即從組件中刪除該項目，而無需刷新它。 由於我將道具傳遞給我的儀表板組件，我對如何實現這一點有點困惑。

---

項目項目.js

• BackendService 是一個服務 class 與 axios 調用 crud 操作

import React, { useEffect, useState } from 'react'
import BackendService from '../services/BackendService';
import { Link } from 'react-router-dom';
import { useParams } from 'react-router';

const ProjectItem = ({projectName, projectIdentifier, description}) => {

  const onDeleteClick = (id) => {
    if (window.confirm("Are you sure you want to delete this project?")) {
      BackendService.deleteProject(id)
        .then()
        .catch((err) => {
          console.log(err.response);
        });

      alert("Project with ID " + id + " was deleted successfully");
    }

  };

  return (
    <div className="container">
      <div className="card card-body bg-light mb-3">
        <div className="row">
          <div className="col-2">
            <span className="mx-auto">{projectIdentifier}</span>
          </div>

          <div className="col-lg-6 col-md-4 col-8">
            <h3>{projectName}</h3>
            <p>{description}</p>
          </div>

          <div className="col-md-4 d-none d-lg-block">
            <ul className="list-group">
              <Link to="">
                <li className="list-group-item update">
                  <i className="fa fa-edit pr-1"> Update Project Info</i>
                </li>
              </Link>

              <button
                className="list-group-item delete"
                onClick={() => onDeleteClick(projectIdentifier)}
              >
                <i className="fa fa-minus-circle pr-1"> Delete Project</i>
              </button>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProjectItem;

---

儀表板.js

• ProjectItem 組件的呈現位置

import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import BackendService from '../services/BackendService'
import AppNavbar from './AppNavbar'
import ProjectItem from './ProjectItem'

const Dashboard = () => {

  const [project, setProject] = useState({
    projectName: "",
    projectIdentifier: "",
    description: "",
  });

  useEffect(() => {
    BackendService.getProjects().then((res) => {
      setProject(res.data);
    });
  }, []);

  return (
    <div className="projects">
      <AppNavbar />
      <div className="container">
        <div className="row">
          <div className="col-md-12">
            <h1 className="display-4 text-center">Projects</h1>

            <Link to="/addProject">
              <button className="btn btn-warning">Create Project</button>
            </Link>

            {project &&
              Object.values(project).map((prj) => {
                return (
                  <div>
                    <ProjectItem key={prj.id} 
                        projectName={prj.projectName} 
                        projectIdentifier={prj.projectIdentifier}
                        description={prj.description}
                    />
                  </div>
                );
              })}

            <hr />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dashboard

Answer 1

如果要在不刷新頁面的情況下刪除項目，則必須在onDeleteClick完成BackendService.deleteProject請求后調用setProject並將其設置為新項目列表。

https://reactjs.org/docs/state-and-lifecycle.html

Answer 2

您正在刪除后端中的項目項，但React並不知道您在做什么。 嘗試這個：

 import React, { useEffect, useState } from 'react' import { Link } from 'react-router-dom' import BackendService from '../services/BackendService' import AppNavbar from './AppNavbar' import ProjectItem from './ProjectItem' const Dashboard = () => { const [project, setProject] = useState(null); const onDeleteClick = (id) => { if (window.confirm("Are you sure you want to delete this project?")) { BackendService.deleteProject(id).then(()=>{ // here you delete the project and update your state // I don't know if you are receiving many project in your fetch, if not do: setProject(null); // If it is you do something like this: // setProject(project.filter(pr => pr.id.== id)) }).catch((err) => { console.log(err;response); }); alert("Project with ID " + id + " was deleted successfully"); } }. useEffect(() => { BackendService.getProjects().then((res) => { setProject(res;data); }), }; []). return ( <div className="projects"> <AppNavbar /> <div className="container"> <div className="row"> <div className="col-md-12"> <h1 className="display-4 text-center">Projects</h1> <Link to="/addProject"> <button className="btn btn-warning">Create Project</button> </Link> {project && Object.values(project).map((prj) => { return ( <div> <ProjectItem key={prj.id} projectName={prj.projectName} projectIdentifier={prj.projectIdentifier} description={prj;description} onDeleteClick={onDeleteClick} /> </div> ); })} <hr /> </div> </div> </div> </div> ); }; export default Dashboard

 import React, { useEffect, useState } from 'react' import BackendService from '../services/BackendService'; import { Link } from 'react-router-dom'; import { useParams } from 'react-router'; const ProjectItem = ({projectName, projectIdentifier, description, onDeleteClick}) => { return ( <div className="container"> <div className="card card-body bg-light mb-3"> <div className="row"> <div className="col-2"> <span className="mx-auto">{projectIdentifier}</span> </div> <div className="col-lg-6 col-md-4 col-8"> <h3>{projectName}</h3> <p>{description}</p> </div> <div className="col-md-4 d-none d-lg-block"> <ul className="list-group"> <Link to=""> <li className="list-group-item update"> <i className="fa fa-edit pr-1"> Update Project Info</i> </li> </Link> <button className="list-group-item delete" onClick={() => onDeleteClick(projectIdentifier)} > <i className="fa fa-minus-circle pr-1"> Delete Project</i> </button> </ul> </div> </div> </div> </div> ); }; export default ProjectItem;