如何从firebase实时数据库中删除数据

Question

我创建一个表格从Firebase实时数据库中获取数据的表。我在表中的每行中添加一个删除按钮。删除按钮数据的onclick也应在前端和后端删除。但是我的问题是，当我单击删除按钮数据时，删除了数据，但是在刷新页面数据恢复后，数据不会从后端删除。我不明白我在代码上确实错误的地方，请任何人都可以帮助我解决这个问题。

我在下面分享我的代码。

tabledata.js

import React, { Component } from 'react'
import StartFirebase from "../firebaseConfig/index";
import { ref, onValue} from 'firebase/database';

const db = StartFirebase();

export class TableData extends Component {
constructor(props) {
    super(props);
    this.state = {
        tableData: []    
    }
}



componentDidMount(props) {
    const dbRef = ref(db, 'userRecord')

    onValue(dbRef, (snapshot) => {
         let records = []
        snapshot.forEach(childSnapshot => {
            let keyName = childSnapshot.key;
            let data = childSnapshot.val()
            records.push({ "key": keyName, "data": data })
        })
        this.setState({ tableData: records })
    })
}

DeleteData =  ({ id, e,props }) => {
 fetch(`https://clientsdata-dd45a-default-rtdb.firebaseio.com/userRecord/:${id}.json`,{                                                                                   
            method: 'DELETE',
            header:{
                Accept:"application/json",
                "Content-Type":"application/json"
            }
        }).then((res) => {
            res.json().then((resp) => {
                window.alert('Are you sure wanted to delete data?: ' + id)
                console.log(id)                                                                           //display id of particule click 
                const tableData = this.state.tableData.filter((i) => i.id !== id)                           //if i.id !==id then show 
                this.setState({ tableData: tableData })   
                
                tableData.splice(id, 1)
                this.setState({ tableData: tableData })
                
                window.alert("You delete the data successfully!")
                console.log(tableData)
            })
        })
    }
 render() {
    return (
        <div>
 <table className="table table-bordered table table-hover">
                <thead>
                    <tr>
                        <th>#</th>
                        <th scope="col">ID</th>
                        <th scope="col">Roll</th>
                        <th scope="col">Name</th>
                        <th scope="col">Address</th>
                        <th scope="col">Mobile</th>
                   </tr>
                </thead>
                <tbody>
 {
                        this.state.tableData.map((row, id) => {
                            return (
                                <tr key={id}>
                                    <th key={id} >{row.key}</th>
                                    <th scope="row">{id+1}</th>
                                    <td>{row.data.userData.RollNum}</td>
                                    <td>{row.data.userData.Name}</td>
                                    <td>{row.data.userData.Address}</td>
                                    <td>{row.data.userData.mobile}</td>
                                        <td>{<button className='btn btn-danger' key={row.id} value={row.data.userData.value} id={row.data.userData.value} onClick={(e) => this.DeleteData({id,e})}>Delete</button>}</td>  
 </tr>
                            )
                        })
                   }   

                  
                </tbody>
            </table>
           
        </div>
    )
}
}
export default TableData