ReactJS-从API加载不需要的重复数据

我正在从一个Dribble API获取数据。它几乎成功了，但它正在加载来自API的12个快照，在此之后，再次重复相同的12个快照，然后以正确的方式加载其他快照，从而出现问题：13,14,15

枪声回响： 1,2,3,4,5,6,7,8,9,10,11,12. 好的 1,2,3,4,5,6,7,8,9,10,11,12. 重复问题！！！错误的 13,14,15,16... 好的

对于这种不受欢迎的重复，解决办法是什么

代码如下：

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“反应航路点”导入航路点；
从“./dribble”导入滴球；
导出默认类滴扩展组件{
建造师（道具）{
超级（道具）；
this.state={page:1，shots:[]}；
this.getShots=this.getShots.bind（this）；
}    
componentDidMount（）{
这个。getShots（）；
}
getShots（）{
返回$.getJSON（'https://api.dribbble.com/v1/shots?page=“+this.state.page+”&access\u token=access\u token\u HERE&callback=？”）
。然后（（resp）=>{
var newShots=this.state.shots.concat（resp.data）；
这个.setState（{
第页：this.state.page+1，
镜头：新闻短片
});
});
}
render（）{
const shots=this.state.shots.map（（val，i）=>{
回来
});
返回(
{shots}
);
}
}  

为什么 我认为您的

航路点

组件的onEnter事件意外触发，导致多次调用getShots（）函数

怎样 我的建议是指定一个

dataFecthed

状态来控制是否装载航路点组件。如下所示：

import React，{Component}来自“React”
从“react dom”导入react dom
从“反应航路点”导入航路点
从“./dribble”导入滴球
导出默认类滴扩展组件{
建造师（道具）{
超级（道具）
this.state={page:1，shots:[]，dataFetched:true}
this.getShots=this.getShots.bind（this）
}
componentDidMount（）{
这个。getShots（）
}
getShots（）{
这是我的国家({
dataFetched:false，
})
返回$.getJSON(
'https://api.dribbble.com/v1/shots?page=' +
这个.state.page+
“&access_token=41ff524ebca5e8d0bf5d6f9f2c611c1b0d24a19755ce379326872c1e7900b4&callback=？”
)。然后（resp=>{
var newShots=this.state.shots.concat（resp.data）
这是我的国家({
第页：this.state.page+1，
镜头：新闻短片，
dataFetched:true，
})
})
}
render（）{
const shots=this.state.shots.map（（val，i）=>{
回来
})
返回(
{shots}
{this.state.dataFetched&&}
)
}
}

记住getShots方法的日志状态，并告诉我们每次都记录了什么？