为什么我的文本在获取请求后加载为白色，但在页面刷新后变为黑色？ 香草JS

Question

在我最初的获取请求之后，我的所有文本都加载为白色。 我不想要白色文本，但重新加载后字体是黑色的（应该是这样）。 这与内容加载与 promise 偶然解决有关吗？

附带问题：将两个提取请求组合在一起并调用 Promise.all 是不好的做法吗？

来自 index.html 的脚本顺序

    <script src="src/suggestion.js"></script>
    <script src="src/member.js"></script>
    <script src="src/gathering.js"></script>
    <script src="src/book_group.js"></script>
    <script src="src/book.js"></script>
    <script src="src/member_sessions.js"></script>
    <script src="src/index.js"></script>

index.js注意：还有其他代码，如创建元素和设置属性，我已从中删除

const BACKEND_URL = "http://localhost:3000";

//add event listener to fetch book groups when clicked in navbar
document
  .getElementById("nav-select-club")
  .addEventListener("click", BookGroup.fetchClubNamesandBooks.bind(BookGroup), {
    once: true,
  });

book_group.js注意：renderGroup() function 第一行中的#app-container 是文本在刷新之前显示为白色的部分，然后将自身更正为黑色。 此处引用的所有元素都包含在 appContainer 元素中。

class BookGroup {
  static async fetchClubNamesandBooks() {
    let [groupsResponse, booksResponse] = await Promise.all([
      fetch("http://localhost:3000/book_groups"),
      fetch("http://localhost:3000/books"),
    ]);

    let groups = await groupsResponse.json();
    let books = await booksResponse.json();

    for (let book of books) {
      let newBook = new Book(book);
    }
    for (let group of groups) {
      let newGroup = new BookGroup(group);
    }
    this.renderGroups();
  }

  
  static renderGroups() {
    document.getElementById("app-container").style.display = "block";

    search.style.display = "none";

    document
      .getElementById("nav-select-club")
      .addEventListener("click", () => BookGroup.renderGroups());

    grpSugs.innerHTML = "";

    grpContainer.innerHTML = "";

    let loginForm = document.getElementById("login-form-container");

    if (loginForm) {
      loginForm.style.display = "none";
    }

    // non-destructively exclude first group - this is a default group for members
    // that do not currently belong to a group and does not need to be rendered
    let memberedBookGroup = BookGroup.allGroups.slice(1);

    for (let group of memberedBookGroup) {
      group.renderGroup();
    }
  }

  renderGroup() {
    let pgh = document.createElement("p");
    pgh.id = `group-${this.id}`;
    pgh.setAttribute("class", "group-name");
    pgh.innerText = this.name;

    grpContainer.append(pgh);
    appContainer.append(grpContainer);
    let groupId = this.id - 1;

    pgh.addEventListener("click", () => {
      let bg = BookGroup.allGroups.find((group) => group.id === groupId + 1);

      bg.showGroup();
    });
  }

  showGroup() {
    search.style.display = "block";

    grpContainer.innerHTML = `<h2 class="group-header-name">${this.name}</h2>`;
    grpContainer.id = `${this.id} - group`;
    grpContainer.append(sugContainer);

    let groupSuggestedBookIds = [];
    let groupSuggestedBooks = [];

    for (let suggestion of this.suggestions) {
      groupSuggestedBookIds.push(suggestion.book_id);
    }

    for (let bookId of groupSuggestedBookIds) {
      for (let book of Book.allBooks) {
        if (bookId === book.id) {
          groupSuggestedBooks.push(book);
        }
      }
    }

    for (let book of groupSuggestedBooks) {
      Suggestion.renderSuggestion(book);
    }
  }

}