如何在从Firebase中删除项目后‘刷新’React JS页面

import React, { Component } from 'react';
import firebase from 'firebase';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      projects: []
    };
  }

  componentDidMount() {
    // 监听Firebase数据库的变化
    firebase.database().ref('projects').on('value', snapshot => {
      const projects = snapshot.val();
      this.setState({ projects });
    });
  }

  handleDeleteProject(projectId) {
    // 从Firebase中删除项目
    firebase.database().ref(`projects/${projectId}`).remove();
  }

  render() {
    const { projects } = this.state;

    return (
      <div>
        <h1>我的项目</h1>
        <ul>
          {projects.map(project => (
            <li key={project.id}>
              {project.name}
              <button onClick={() => this.handleDeleteProject(project.id)}>删除</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default MyComponent;