“else”語句在更新 Firebase 用戶名時不斷觸發？

Question

我有一個彈出模式，當用戶從下拉導航菜單中單擊“更新配置文件”時會出現該模式。 在此模式中，他們可以更改其用戶名。

我正在嘗試實現以下工作流程：用戶點擊“更新配置文件”，輸入他們的新用戶名，點擊“提交”按鈕，表單重置，模式關閉。

第一個用戶名更新完全符合我的要求。 后續的更新嘗試似乎觸發了我的“else”語句，即捕獲用戶是否將新用戶名字段留空，並觸發窗口警報。

這是我整個更新配置文件模式的代碼：

const updateProfileModal = (currentUser) => {

    // DOM Elements
    const modal = document.querySelector(".modal");
    const openModalButton = document.querySelector("#update-profile-btn");
    const updateButton = document.querySelector("#update");
    const updateProfileForm = document.querySelector(".profile-update-form");
    const profileNameField = document.querySelector("#profile_name");
    const closeModalButton = document.querySelector("#close-modal");

    // Open "update profile" modal when clicked from dropdown menu
    openModalButton.addEventListener("click", (e) => {
        e.preventDefault();

        // Hide the dropdown menu after opening update profile modal
        document.querySelector(".dropdown-content").classList.toggle("show");

        // Show user's email address and current username in placeholders
        document.querySelector("#profile_email").placeholder = currentUser.email;
        document.querySelector("#profile_name").placeholder = currentUser.displayName;

        // If the modal doesn't have the CSS "show" class:
        if (!modal.classList.contains("show")) {

            // Toggle that class into the modal
            modal.classList.toggle("show");

            // Upon clicking on "update" button inside modal:
            updateButton.addEventListener("click", (e) => {
                e.preventDefault();

                // Get value of new displayName
                const newName = profileNameField.value;

                // Update displayName.
                if (newName !== "") {
                    updateUsername(newName)
                    updateProfileForm.reset();
                    modal.classList.toggle("show")
                    firebase.auth().currentUser.reload();
                } else {
                    window.alert("Must choose a new name to update")
                }
            })
        }
    })

    // Close profile updating modal upon clicking the "x"
    closeModalButton.addEventListener("click", () => {
        modal.classList.toggle("show");
    })
}

這是它使用的 updateUsername 函數：

// Update user's display name
const updateUsername = (newName) => {
    auth.currentUser.updateProfile({
        displayName: newName
    }).then(() => {
        // Once the name has been updated, append it to the user dropdown menu
        updateDisplayNameInDOM(firebase.auth().currentUser)
    });
}

Answer 1

您可以嘗試刪除updateProfileForm.reset(); 從你的代碼。 看起來這會導致后續更新失敗。