在JS中发送GET请求后，为什么我的数组没有立即更新？

如何解决在JS中发送GET请求后，为什么我的数组没有立即更新？

我的目标是使用Javascript和HTML创建一个单页电子邮件应用程序。我使用的Web框架是Django，根据项目指南，我只应该编写JS和HTML（因此我们可以假定但我的JS和HTML都是正确的）。

我的问题是，我在应用程序的“撰写”部分撰写了一封电子邮件后，应该直接将我发送到“已发送”部分，在这里我可以看到我发送的所有电子邮件，包括我发送的电子邮件>刚刚发送。由于某些原因，我看不到我刚刚发送的电子邮件。仅当我重新加载页面时，它才会出现，这不是我想要的。以下两个代码段属于一个名为 inbox.js 的文件：

撰写电子邮件

function compose_email() {
    // Show compose view and hide other views
    document.querySelector("#emails-view").style.display = "none";
    document.querySelector("#compose-view").style.display = "block";

    const recipients = document.querySelector("#compose-recipients");
    const subject = document.querySelector("#compose-subject");
    const body = document.querySelector("#compose-body");

    //   Clear out composition fields
    recipients.value = "";
    subject.value = "";
    body.value = "";

    document.querySelector("form").onsubmit = function () {
        const recipients = document.querySelector("#compose-recipients").value;
        const subject = document.querySelector("#compose-subject").value;
        const body = document.querySelector("#compose-body").value;

        fetch("/emails",{
            method: "POST",body: JSON.stringify({
                recipients: recipients,subject: subject,body: body,}),})
            .then((response) => response.json())
            .then((result) => {
                //result is just a message to let me know if the email was sent successfully
                console.log(result);
            });

        load_mailbox("sent");
        return false;
    };
}

load_mailbox

function load_mailbox(mailbox) {
    // Show the mailbox and hide other views
    document.querySelector("#emails-view").style.display = "block";
    document.querySelector("#compose-view").style.display = "none";

    // Show the mailbox name
    document.querySelector("#emails-view").innerHTML = `<h3>${
        mailbox.charAt(0).toUpperCase() + mailbox.slice(1)
    }</h3>`;

    //this is where I'm having issues
    if (mailbox === "sent") {
        fetch("/emails/sent")
            .then((response) => response.json())
            .then((emails) => {
                //when I console.log(emails) after being directly sent to this function by compose_email I get an array that does not have the email I just sent.
                console.log(emails);
                for (var email of emails) {
                    document.querySelector("#emails-view").innerHTML += `
                    <div class="card bg-light">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-4">${email.recipients}</div>
                                <div class="col-4">${email.subject}</div>
                                <div class="col-4">${email.timestamp}</div>
                            </div>
                        </div>
                    </div>
                    `;
                }
            });
    }
}