为什么api调用会有重复的响应？
我发送了一个api请求，并从数据中得到重复或重复的响应。我发送api请求，以获取每只狗的狗名和id，并将数据放在html位置。第一只狗来了三次，然后是第二只狗，然后是第一只狗，然后是第三只狗，然后是第二只狗，依此类推。
我尝试过fetch api和async await，它们都做同样的事情。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)
});我只想让狗按时间顺序输出，而不是重复。我没有收到任何错误消息。任何帮助都将不胜感激。提前谢谢。
回答 2
Stack Overflow用户
发布于 2019-10-07 02:54:12
只需将其从forEach循环中删除：
document.getElementById('dog-info').insertAdjacentHTML('beforeend', output)
它应该在它之外。与output处于同一级别。如果我是你，我也会考虑使用.map或.reduce来生成output字符串。它可以简化代码。
Stack Overflow用户
发布于 2019-10-07 02:41:52
您将每条狗的超文本标记语言以及之前的每条狗都添加到output变量中。此外，您还在重复运行call insertAdjacentHTML，为每条狗运行一次。这意味着每次将output的内容添加到页面中时，您都会获得整个内容，包括到目前为止处理过的每条狗，而不仅仅是当前的狗。
有两种明显的方法可以解决这个问题。任一
1)移除+=中的+，即output =，使得output`每次都会被覆盖，而不是追加。
或
2)将对insertAdjacentHTML的调用移到foreach循环的末尾，这样在为所有狗生成output之后，您只需将HTML的内容写入页面一次。
https://stackoverflow.com/questions/58260139
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号