Javascript 为什么api调用会重复响应我？

我发送一个api请求并从数据中获取重复的响应。我发送每个狗的狗名和id的api请求，并将数据放在html位置。第一条狗来了三次，然后第二条狗来了，然后第一条狗又来了，然后第三条狗又来了，然后第二条狗又来了，依此类推

我尝试了fetchapi和asyncwait，它们都做了相同的事情。Iv、e也使用map、forEach和for-in，结果相同

       fetch(api)
       .then(response =>{
           return response.json();
       })
       .then(data => {
          console.log(data)
          let dogs = data;
          let output = '';
          dogs.forEach(dog => {
              console.log(dog.id);
              output+=`
              <div className="col-10 mx-auto col-md-6 col-lg-4 my-3">
              <div className="card">
                <img src="gdogs.jpg" className="img-card-top" style="height:14rem"alt="dogs"/>
                  <div className="card-body text-capitalize">
                    <h6 class="name-title">${dog.name}</h6>
                    <h6 class="id">${dog.id}</h6>
                    <h6 className="text-warning text-slanted">Provided by Dog API</h6>
                  </div>
                  <div className="card-footer">
                    <button type="button" className="btn btn-primary text-capitalize" ></button>
                    <a href="https://api.thedogapi.com" className="btn btn-success mx-2 text-capitalize" target="_blank" rel="noopener noreferrer">dog api</a>
                  </div>
              </div>

            </div>

              `
              document.getElementById('dog-info').insertAdjacentHTML('beforeend', output)
          });

fetch（api）
。然后（响应=>{
返回response.json（）；
})
。然后（数据=>{
console.log（数据）
让狗=数据；
让输出=“”；
dogs.forEach（dog=>{
控制台日志（dog.id）；
输出+=`
${dog.name}
${dog.id}
由Dog API提供
`
document.getElementById（'dog-info'）。insertAdjacentHTML（'beforeend'，output）
});

---

我只想让狗按时间顺序输出，不重复。我没有收到任何错误消息。任何帮助都将不胜感激。提前感谢。

您正在将每只狗的HTML添加到

输出变量中，以及之前的每只狗。同时，您正在运行调用
insertAdjacentHTML重复，每只狗一次。这意味着每次你将
output
的内容添加到你的页面中，你都会得到整个内容，包括目前为止处理的每只狗，而不仅仅是当前的狗

有两种明显的方法可以解决这个问题

1） 删除
+=
中的
+
，即
输出=
，以便每次都覆盖输出，而不是附加到输出

或

2） 在foreach循环结束后，将对
insertAdjacentHTML
的调用移动到，以便在为所有狗生成HTML后，只需将
output
的内容写入页面一次。
只需从foreach循环中删除此项：

document.getElementById（'dog-info'）.insertAdjacentHTML（'beforeend'，output）

它应该在代码的外面，在同一个级别上，输出代码< >代码> .map 或<代码>。减少生成<代码>输出< /代码>字符串。它可以简化代码。
什么调用这个代码？它是用函数包好的吗？谢谢！就是这样。我最初使用的是地图，但是改变了它。看看我是否会得到不同的结果。再次感谢Steve Perry！很高兴我的回答有帮助！感谢你的回答！你完全正确，我非常感谢你的解决方案！