在React应用程序中，我删除了firebase上的组件数据，但即使我更改了状态，它也不会从dom中删除

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

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      isDataDeleted: false,
    };
  }

  componentDidMount() {
    // 订阅Firebase数据的变化
    this.firebaseRef = firebase.database().ref('path/to/data');
    this.firebaseRef.on('value', snapshot => {
      this.setState({ data: snapshot.val() });
    });
  }

  componentWillUnmount() {
    // 取消对Firebase数据的订阅
    this.firebaseRef.off();
  }

  handleDeleteData() {
    // 删除Firebase上的组件数据
    // ...

    // 更新状态，标记数据已删除
    this.setState({ isDataDeleted: true });
  }

  render() {
    const { data, isDataDeleted } = this.state;

    // 根据状态决定是否渲染组件
    if (isDataDeleted) {
      return null;
    }

    return (
      <div>
        {/* 渲染组件 */}
      </div>
    );
  }
}