Skycons仅显示最后一个阵列项目

Question

我从Darksky API中提取数据，并从返回数据中获得一个名为Daily的数组；这给了我接下来一周的每日天气。

我想做的是遍历数组并将信息动态添加到正文中。

循环播放时，我向每个画布元素添加一个uuid，然后使用Skycons skycons.add（id，day.icon）; skycons.play（）;使用uuid的forEach元素。

问题在于，当我的程序运行时，它仅在最后一个数组项元素上显示图标。

const skycons = new Skycons({"color": "black"});
    class UI {
        constructor() {
            this.output = document.getElementById('output');
            this.iconOne = document.getElementById('icon1');
            this.spinner = document.getElementById('spinner');
        }

        paintUI(weather) {
            displaySpinner();
            setTimeout(() => {
                removeSpinner();
                this.output.innerHTML = '';
                const dailyWeatherData = weather.weatherData.daily.data;
                dailyWeatherData.forEach((day) => {
                let id = uuidv4();
                  this.output.innerHTML += `
                  <div class="animated fadeIn delay-500ms card">
                    <canvas id="${id}" height="128" width="128"></canvas>
                    <h3>${moment.unix(day.time).format("MMM DD, YY")}</h3>
                    <p>${day.summary}</p>
                  </div>
                  `
                  skycons.add(id, day.icon);
                  skycons.play();
                });
            }, 1000);
        }
    }

    function displaySpinner() {
        this.spinner.setAttribute('style', 'display: block;');
    }

    function removeSpinner() {
        this.spinner.classList.add('animated', 'fadeOut', 'delay-500ms');
        this.spinner.remove();
    }