Question

我有一个创建 section 的 section 类。我正在使用比萨菜单类在 UI 上呈现 data.json 文件中的每个比萨项目。代码对我来说似乎是正确的，应该呈现比萨饼项目，但事实并非如此。以下是代码。
我检查时得到 <div id = "app">undefined</div>。

链接：https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&hidenavigation=1&theme=dark

App.js

class App {
  static pizzaMenu = new pizzaMenu();

  static init() {
    const app = document.getElementById("app");
    app.append(this.pizzaMenu.render());
  }
}
App.init();

pizzaMenu.js

class pizzaMenu extends Section {
  constructor(title) {
    super();
    this.title = title || "Loading...";
  }
  render() {
    const pizzaMenuEl = this.createSection();
    fetch("./data.json")
      .then((response) => {
        console.log("Check 1");
        return response.json();
      })
      .then((data) => {
        data.pizza.forEach((item) => {
          console.log("Check 2");
          pizzaMenuEl.innerHTML = `
                <div class="shop-item" id = ${item.id} >
                    <span class="shop-item-title">${item.name}</span>
                    <span class="shop-item-img"></span>
                    <div class="shop-item-details">
                        <div class = "shop-item-sizes">
                            <input type="radio" value="100" name="sizes">
                            <label>Small</label>
                            <input type="radio" value="200" name="sizes">
                            <label>Medium</label>
                            <input type="radio" value="300" name="sizes">
                            <label>Large</label>
                        </div>
                        <span class="shop-item-price">Rs.${item.price}</span>
                        <button class="btn btn-primary shop-item-button">ADD TO CART</button>
                    </div>
                </div>`;
          return pizzaMenuEl;
        });
      });
  }
}

section.js

class Section {
  // Classes must be passed as an array
  createSection(cssClasses) {
    const sectionEl = document.createElement("div");
    sectionEl.classList.add("row");

    if (cssClasses) {
      for (const cssClass of cssClasses) {
        sectionEl.classList.add(cssClass);
      }
    }

    return sectionEl;
  }
}

index.html

    <body>
        <div id="app"></div>
        <script src="section.js"></script>
        <script src="pizzaMenu.js"></script>
        <script src="app.js"></script>
    </body>

数据.json

{
  "pizza": [
    {
      "id": 1,
      "name": "Tandoori Pizza",
      "image": "Images/pizza.png",
      "price": "Rs.200",
      "sizes": { "Small": 100, "Medium": 200, "Large": 300 }
    },
    {
      "id": 2,
      "name": "Veggie Supreme",
      "image": "Images/pizza.png",
      "price": "Rs.250",
      "sizes": { "Small": 100, "Medium": 200, "Large": 300 }
    }
}

Answer 1

这可能是因为您没有从izzaMenu.render() 函数中返回任何内容。

我对您的代码进行了一些更改以使其正常工作。

看看我做的这个repl https://replit.com/@beesperester/RichBelovedApplicationstack

app.js

class App {
    static init() {
        const pizzaMenuInstance = new pizzaMenu();

        const app = document.getElementById("app");
        
        // pass the app dom node to the render function
        pizzaMenuInstance.render(app)
    }
}

App.init();

pizzaMenu.js

class pizzaMenu extends Section {
    constructor(title) {
        super();
        this.title = title || "Loading...";
    }
    render(app) {
        fetch("menu.json")
        .then((response) => {
            console.log("Check 1");
            return response.json();
        })
        .then((data) => {
            data.pizza.forEach((item) => {
                // create a new div element for every item
                const pizzaMenuEl = this.createSection();

                console.log("Check 2");
                pizzaMenuEl.innerHTML = `
                    <div class="shop-item" id="${item.id}">
                        <span class="shop-item-title">${item.name}</span>
                        <span class="shop-item-img"></span>
                        <div class="shop-item-details">
                            <div class = "shop-item-sizes">
                                <input type="radio" value="100" name="sizes">
                                <label>Small</label>
                                <input type="radio" value="200" name="sizes">
                                <label>Medium</label>
                                <input type="radio" value="300" name="sizes">
                                <label>Large</label>
                            </div>
                            <span class="shop-item-price">Rs.${item.price}</span>
                            <button class="btn btn-primary shop-item-button">ADD TO CART</button>
                        </div>
                    </div>`;

                // use the method "appendChild" of the app instance
                // to append the child element
                app.appendChild(pizzaMenuEl)
            });
        });
    }
}

为什么我在这里看不到渲染的 <div> 元素？

1 个答案: