多次执行fetch

Question

我已经构建了一个javascript函数来创建一个项目（=图片+标题+类别） 使用使用 fetch 的 API。 API响应后，我修改DOM以显示新的项目列表。 最初，提取进展顺利，但现在在没有任何请求的情况下执行了多次。 第一个项目已正确创建（一次），但一旦我创建第二个项目，它就会发送两次（创建 2 个项目）。如果我之后创建其他项目，则会创建 3 ou 4 次。然后下一个项目将创建 6 或 7 次，等等...

我不知道如何避免通过 fetch 多次创建项目。

// ******************************* FONCTION ENREGISTREMENT DU NOUVEAU PROJET *************************************
let errorMessage = document.getElementById("errorMessage");
async function enregistrerProjet(imageInput, titleInput, categoryInput) {
    // Création de l'objet FormData
    const formData = new FormData();
    formData.append("image", imageInput);
    formData.append("title", titleInput);
    formData.append("category", categoryInput);

    try {
        // Envoi du projet via API /works   
        const response = await fetch("http://localhost:5678/api/works", {
            method: "POST",
            headers: {
                "accept": "application/json",
                "Authorization": "Bearer " + tokenLogin,
            },
            body: formData,
        })
        const responseProjet = await response.json();
        
        if (!response.ok) {
            throw new Error(`Une erreur s'est produite lors de l'ajout d'un élément (${response.status}). Veuillez réessayer plus tard.`)
        }
        projets.push(responseProjet); // ajout du nouveau projet au tableau projets

        // Récupération de l'élément du DOM qui accueillera la galerie
        const divGallery = document.querySelector(".gallery");
        // Création d’une balise dédiée au nouveau projet
        const idProjet = document.createElement("figure");
        idProjet.id = "portfolioFigure_" + responseProjet.id;
        idProjet.dataset.idCategorie = responseProjet.categoryId;
        // Création des balises 
        const imageProjet = document.createElement("img");
        imageProjet.src = responseProjet.imageUrl;
        imageProjet.alt = responseProjet.title;
        const titreProjet = document.createElement("figcaption");
        titreProjet.innerText = responseProjet.title;
        // Rattachement de la balise projet à la division Gallery
        divGallery.appendChild(idProjet);
        idProjet.appendChild(imageProjet);
        idProjet.appendChild(titreProjet);
        // ajout d'une balise image pour affichage projet
        idProjet.classList.add("image");
        document.getElementById("modifyProject").className = "modal-masque"; // masquage de la modale
        document.getElementById("galeriePhoto").className = "modal-wrapper"; // réinitialisation de la div galeriePhoto
        masquerModaleAjoutphoto(); // Masquer la modale 2 (Ajout photo)
        // Regénération de la galerie des projets
        document.querySelector(".gallery").innerHTML = "";
        genererProjets(projets);

    } catch (error) {
            errorMessage.textContent = "Erreur d'envoi du projet."; // vérifier le code erreur *************************
            // Attendre un appui clavier
            document.addEventListener("keydown", function(event) {
                event.preventDefault();
                errorMessage.textContent = ""; // Une touche est pressée, efface le message
            });
            // Attendre un clic de souris
            document.addEventListener("click", function(event) {
                event.preventDefault();
                errorMessage.textContent = ""; // Un click est détecté, efface le message
            });
            alert(error);
    };

};

Answer 1

我猜你没有正确清理状态。我的意思是，每次成功获取后，您都希望确保正确清理，即清除状态。我还建议您添加 .removeEventListener，以便事件侦听器被多次添加。

我的朋友，编码最好。 ！