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

问题描述

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

附带问题：将两个 fetch 请求组合在一起并调用 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() 函数第一行中的 #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);
    }
  }

}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）