使用React从表中删除项目后重新加载表

const [projects, setProjects] = useState([]);

useEffect(() => {
  // 从后端API获取项目数据
  fetchProjects()
    .then((data) => {
      setProjects(data);
    })
    .catch((error) => {
      console.error('Error fetching projects', error);
    });
}, []);

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {projects.map((project) => (
      <tr key={project.id}>
        <td>{project.id}</td>
        <td>{project.name}</td>
        <td>
          <button onClick={() => handleDelete(project.id)}>Delete</button>
        </td>
      </tr>
    ))}
  </tbody>
</table>

const handleDelete = (projectId) => {
  deleteProject(projectId)
    .then(() => {
      // 删除成功后重新加载项目数据
      fetchProjects()
        .then((data) => {
          setProjects(data);
        })
        .catch((error) => {
          console.error('Error fetching projects', error);
        });
    })
    .catch((error) => {
      console.error('Error deleting project', error);
    });
};

const fetchProjects = () => {
  // 使用适当的方法和API获取项目数据
  return fetch('/api/projects')
    .then((response) => response.json())
    .catch((error) => {
      console.error('Error fetching projects', error);
    });
};

const deleteProject = (projectId) => {
  // 使用适当的方法和API删除项目
  return fetch(`/api/projects/${projectId}`, { method: 'DELETE' })
    .catch((error) => {
      console.error('Error deleting project', error);
    });
};