防止在每次点击时添加DOM元素

问题描述

我有以下脚本，该脚本获取具有给定类的DOM元素，并将其添加到数组中。然后，它遍历数组，并将值添加到WordPress Gutenberg中option组件的SelectControl元素中。我可以将元素放入下拉列表中的数组中，但是在控制台中收到以下错误：Uncaught TypeError: Cannot read property 'appendChild' of null。选择后，它也不会在选择组件中显示所选选项，并且每次从下拉列表中选择一个选项时，都会在下拉列表中复制数组选项。

我怀疑这可能是执行顺序问题，但不确定：

setTimeout(() => {
            let headers = [...document.querySelectorAll('.wp-block-heading')].map(item => item.innerText);
            const select = document.getElementById('selectheader');
            for (let i = 0; i < headers.length; i++) {
                let opt = headers[i];
                let el = document.createElement('option');
                el.textContent = opt;
                el.value = opt;
                select.appendChild(el);
            }
        },1000);


<SelectControl
    value={[headers]}
    id="selectheader"
    options={[headers]}
    onChange={setJumpLink}
/>

解决方法

它实际上需要：

if (select && select.innerHTML) {
    select.innerHTML = '';
}

在循环之前。