自定义元素上的 connectedCallback () 不能使用 forEach 循环 javascript 上的数据

Question

任何人都可以为我目前遇到的问题提供解决方案吗？我创建了一个自定义元素，这个自定义元素肯定是在dom上检测到的，但是我需要加载这个自定义元素中包含的数据，所以我的程序代码是这样的。

import './menu-item.js';

class MenuList extends HTMLElement {

    // forEach cannot be used if I use the ConnectedCallback () method
    connectedCallback() {
        this.render()
    }

    // my data can be from this method setter
    set menus(menus) {
        this._menus = menus;
        this.render();
    }

    render() {
        this._menus.forEach(menu => {
            const menuItemElement = document.createElement('menu-item');
            menuItemElement.menu = menu;
            this.appendChild(menuItemElement);
        });
    }
}

customElements.define('menu-list', MenuList);

这是我在 main.js 文件中发送的数据

import '../component/menu/menu-list.js';
import polo from '../data/polo/polo.js';

const menuListElement = document.querySelector('menu-list');
menuListElement.menus = polo;

请给我解决方案

Answer 1

connectedCallback 在 menus=polo 语句之前运行 。

所以没有this._menus声明。

---

如果 menus setter 所做的只是调用渲染，那么为什么不合并它们：

 set menus(menus) {
        this.append(...menus.map(menu => {
            const menuItemElement = document.createElement('menu-item');
            menuItemElement.menu = menu;
            return menuItemElement;
        }));
    }