删除用户帐户对话框 - 使用 React JS 的 firebase答案

【问题标题】：Delete user account Dialog - firebase with React JS删除用户帐户对话框 - 使用 React JS 的 firebase
【发布时间】：2021-07-11 11:14:36
【问题描述】：

此对话框必须删除当前签名用户的用户身份验证信息：

import React, { Component } from 'react';
import fire, { firestore } from '../config';

var user = fire.auth().currentUser;
var email = user ? user.email.toString() : "";
var password = "";
var typedPassword = "";

class DeleteConfirmationDialog extends Component {

    componentDidMount() {
        user = fire.auth().currentUser;
        email = fire.auth().currentUser.email;
        console.log(email)
        firestore.collection("User").where("email", "==", email)
            .get()
            .then((querySnapshot) => {
                querySnapshot.forEach((doc) => {
                    password = doc.data().password;
                });
            })
            .catch((error) => {
                console.log("Error getting documents: ", error);
            });
    }

    del = (e) => {
        e.preventDefault();
        if (password === typedPassword) {
            firestore.collection("User").where('email', '==', email).get().then((snap) => {
                snap.forEach((doc) => {
                    doc.ref.delete();
                    console.log("DOC FUNCTION")
                })
            }).then(function () {
                user.delete();
                console.log("SUCCESS")
            })
                .catch(function (error) {
                    console.log(error)
                })
        } else {
            console.log("Password is NOT correct")
        }
    }

    handleInputChange = (e) => {
        typedPassword = e.target.value;
        console.log(password)
        console.log(typedPassword)
    }

    render() {
        return (
            <center className='delete-Dialog' >
                <p style={{ margin: '3px' }}>For your security, please re-enter your password to continue</p>
                <form>
                    <input type='password' placeholder='Password' className='inputForDelete' onChange={this.handleInputChange} />
                    <br />
                    <button className='continue' onClick={this.del}>continue</button>
                </form>
            </center>
        );
    }
}
export default DeleteConfirmationDialog;

它应该同时删除身份验证数据并从 Firestore 集合中删除用户。当我点击提交时，它显示“SUCCESS”，但我仍然在 firebase 中看到该用户并且可以再次登录，可能是什么问题？

【问题讨论】：

标签： reactjs firebase google-cloud-firestore firebase-authentication

【解决方案1】：

尝试在函数del开头添加e.preventDefault()，比如：

const del = (e) => {
    e.preventDefault()
    // rest of your code
 }

点击按钮后不会重新加载页面。你可以阅读更多关于它here

点击后是否检查了它是否在firebase数据库中被删除？即使页面再次加载？

【讨论】：