HTML内容未添加

Question

我有一个类似的 class 结构，但它对我不起作用，我已经尝试了几种方法，但无法解决问题。如您所见，构造函数被正确执行，最后一个构造函数中的方法也被正确执行。但是，当我创建 HTML 内容时，它不会绘制它。为什么以及如何解决这个问题？

class AutoComplete{
    constructor(){
    console.log("constructor autocomplete")
    this.table = new Table();
    
  }
}

class Table{
    constructor(){
    console.log("constructor table")
    
    this.arr = []
    
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json())
    .then((data) => {
        data.map(d => this.arr.push(d))
    });
  
    this.fill();
  }
  
  fill = () => {
    console.log("fill");
    const content = document.querySelector("#content");
    // doesn't work
    this.arr.forEach( ct => {
        const div = document.createElement("div");
        div.innerText = ct.body;
      
        content.appendChild(div);
        //content.innerHTML += div;
    });
  }
}

let autoc = new AutoComplete();

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  
  <div id="content"></div>

</body>
</html>

Answer 1

发生这种情况是因为您需要在 .then() 回调函数中调用 this.fill()。除此以外。 this.fill 在您从 API.

获取数据之前被调用

演示：

class AutoComplete{
    constructor(){
    console.log("constructor autocomplete")
    this.table = new Table();
    
  }
}

class Table{
    constructor(){
    console.log("constructor table")
    
    this.arr = []
    
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json())
    .then((data) => {
        data.map(d => this.arr.push(d));
        this.fill();
    })
    
    // this.fill()
  }
  
  fill = () => {
    console.log("fill");
    const content = document.querySelector("#content");
    // doesn't work
    this.arr.forEach(ct => {
        const div = document.createElement("div");
        div.innerText = ct.body;
      
        content.appendChild(div);
        //content.innerHTML += div;
    });
  }
}

let autoc = new AutoComplete();

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  
  <div id="content"></div>

</body>
</html>

HTML内容未添加

HTML content is not added

html

javascript

fetch