React调用删除API后组件未实时移除需刷新才生效如何解决？

实现方案 #

项目列表的状态存储在父组件Dashboard中，只需要通过props将更新列表的回调方法传递给子组件ProjectItem，子组件删除成功后调用该回调更新父组件状态，即可实现页面自动刷新。

步骤1：修改Dashboard组件 #

新增删除成功后的更新逻辑，将回调方法传递给子组件：

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 = () => {
  // 注意：你当前命名为project实际存储的是项目列表，可根据实际接口返回值调整命名
  const [project, setProject] = useState({
    projectName: "",
    projectIdentifier: "",
    description: "",
  });

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

  // 新增：删除项目后更新列表的回调方法，两种实现二选一即可
  const handleProjectDelete = (deletedId) => {
    // 实现1：本地过滤删除对应项，性能更高
    const filteredProjects = Object.values(project).filter(prj => prj.projectIdentifier !== deletedId);
    setProject(filteredProjects);

    // 实现2：重新拉取全量项目数据，保证和后端数据完全一致，更稳妥
    // 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 key={prj.id}>
                    {/* 新增传递onDelete回调 */}
                    <ProjectItem  
                        projectName={prj.projectName} 
                        projectIdentifier={prj.projectIdentifier}
                        description={prj.description}
                        onDelete={handleProjectDelete}
                    />
                  </div>
                );
              })}

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

export default Dashboard

步骤2：修改ProjectItem组件 #

接收父组件传递的回调，删除接口调用成功后触发回调更新列表：

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

// 新增接收onDelete参数
const ProjectItem = ({projectName, projectIdentifier, description, onDelete}) => {

  const onDeleteClick = (id) => {
    if (window.confirm("Are you sure you want to delete this project?")) {
      BackendService.deleteProject(id)
        .then(() => {
          // 注意：原代码alert放在then外会出现删除失败还提示成功的问题，移到then内
          alert(`Project with ID ${id} was deleted successfully`);
          // 调用父组件回调更新列表
          onDelete(id);
        })
        .catch((err) => {
          console.log(err.response);
          alert("删除失败，请稍后重试");
        });
    }

  };

  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;

额外优化点：你的原代码中ProjectItem引入了useEffect、useState、useParams但都没有使用，可以直接删掉无用导入。

内容的提问来源于stack exchange，提问作者ServletException