用api删除组件只有刷新Reactjs后才消失

Question

我有一个带有 CRUD 功能的 Spring Boot API，在我的 React 前端我有这个，它是一个仪表板组件，在里面我正在渲染一个 ProjectItem 组件列表并将它们作为 props 传递给仪表板组件。

当我删除一个项目时，我希望它立即从组件中删除该项目，而不必刷新它。 由于我将道具传递给我的仪表板组件，我对如何实现这一点有点困惑。

---

ProjectItem.js

• BackendService 是一个服务类，带有 axios 调用用于增删改查操作

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

如果您想删除项目而不刷新页面，则必须在

setProject

中完成

BackendService.deleteProject

请求后，调用

onDeleteClick

并将其设置为新项目列表。

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;