Reactjs 若卡刷得很快，那个么使用效果将进入无限循环

我面临的问题是，当我快速刷卡时，我的使用效果会被无限调用，这会弄乱我的一副牌。然而，我的useEffect应该只在当前卡片索引发生变化时调用，但它每次都会发生。尝试了很多次，但都无法理解“我是react/react native中的noob”。我正在为我的代码粘贴代码，请帮助我，任何帮助都将不胜感激

import React，{useState，useffect}来自“React”；
从“react native”导入{样式表、文本、视图}；
从“样式化组件”导入样式化；
从“react native deck Swiper”导入Swiper；
从“../ReactionCTAs/ReactionCTAs”导入ReactionCTAs；
从“../cardMovieDetails/MovieDetails”导入MovieDetails；
常量建议=（）=>{
常量[currentCardIndex，setCount]=使用状态（0）；
const[loading，setLoading]=useState（true）；
const[cardsState，updateState]=useState({
卡片：[]，
swipedAllCards:错误，
瑞士人：''，
加的斯指数：0，
页码：1，
});
useffect（（）=>{
log（'Use effect being called'）；
取回(
`https://abcde`,
{
方法：“GET”，
标题：{
接受：'application/json'，
授权：“令牌”，
},
},
)
.then（（response）=>response.json（））
。然后（（json）=>{
设置加载（假）；
不动产({
…cardsState，
卡片：[…cardsState.cards，…json.data]，
});
})
.catch（（错误）=>{
控制台错误（error）；
});
//eslint禁用下一行react HOOK/deps
}，[currentCardIndex]）；
const renderCard=（卡片、索引）=>{
返回(
{cardsState.cards[index]！==未定义(
) : (
未定义
)}
);
};
常量=（类型）=>{
setCount（（prevCurrentCardIndex）=>prevCurrentCardIndex+1）；
updateState（（prevState）=>({
…国家，
页码：prevState.pageNumber+1，
}));
如果（类型=='right'）{
取（'https://abcde', {
方法：“POST”，
正文：`{“movie”：${cardsState.cards[currentCardIndex.id}`，
标题：{
“内容类型”：“应用程序/json”，
授权：“令牌”，
},
});
}
};
const onswipdallcards=（）=>{
不动产({
…cardsState，
swipedAllCards：没错，
});
};
常量swipeLeft=（）=>{
cardsState.swiper.swipleft（）；
};
常量swipeRight=（）=>{
cardsState.swiper.swiperRight（）；
};
常量swipeTop=（）=>{
cardsState.swiper.swipeTop（）；
};
常量swipeBottom=（）=>{
cardsState.swiper.swipeboottom（）；
};
退货(
) : (
{
cardsState.swiper=swiper；
}}
背景颜色={'#20242b'}
onsweed={（）=>onsweed（'general'）}
onSwipedLeft={（）=>onSwiped（'left'）}
onSwipedRight={（）=>onSwiped（'right'）}
onSwipedTop={（）=>onSwiped（'top'）}
onSwipedBottom={（）=>onSwiped（'bottom'）}
onTapCard={swipeLeft}
卡片={cardsState.cards}
cardIndex={cardsState.cardIndex}
cardVerticalMargin={80}
renderCard={renderCard}
children={true}
stackScale={4.5}
onSwipedAll={onSwipedAllCards}
堆栈大小={3}
stackSeparation={-25}
重叠带={{
底部：{
标题：“惨淡”，
风格：{
标签：{
背景颜色：“黑色”，
边框颜色：“黑色”，
颜色：'白色'，
边框宽度：1，
},
包装器：{
flexDirection:'列'，
对齐项目：“居中”，
为内容辩护：“中心”，
},
},
},
左：{
标题：'不'，
风格：{
标签：{
背景颜色：“黑色”，
边框颜色：“黑色”，
颜色：'白色'，
边框宽度：1，
},
包装器：{
flexDirection:'列'，
对齐项目：“柔性端”，
justifyContent:“flex start”，
玛金托普：30，
边缘左侧：-30，
},
},
},
对:{
标题：'像'，
风格：{
标签：{
背景颜色：“黑色”，
边框颜色：“黑色”，
颜色：'白色'，
边框宽度：1，
},
包装器：{
flexDirection:'列'，
alignItems:'flex start'，
justifyContent:“flex start”，
玛金托普：30，
marginLeft:30，
},
},
},
顶部：{
标题：“超级喜欢”，
风格：{
标签：{
背景颜色：“黑色”，
边框颜色：“黑色”，
颜色：'白色'，
边框宽度：1，
},
包装器：{
flexDirection:'列'，
对齐项目：“居中”，
为内容辩护：“中心”，
},
},
},
}}
animateOverlayLabelsOpacity
动画不透明度
刷卡
/>
);
};
const Container=styled.View`
弹性：1；
`;
const CardImage=styled.ImageBackground`
身高：100%；
宽度：372px；
`;
const Card=styled.View`
弹性：1；
边界半径：4px；
证明内容：中心；
背景色：#20242b；
`;
const ProgressBar=styled.ActivityIndicator`
弹性：1；
证明内容：中心；
对齐项目：居中；
`;
出口违约建议；

不清楚您的代码应该做什么，但根据用户操作获取数据

//helper to make sure promise only resolves when
//  it was the last user action
const last = (fn) => {
  const check = {};
  return (...args) => {
    const last = {};
    check.last = last;
    return Promise.resolve(fn(...args)).then((resolve) =>
      check.last === last
        ? resolve
        : Promise.reject('replaced by newer request')
    );
  };
};
const debounce = (fn, time = 300) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), time);
  };
};
// only resolve if it was the last user action
const lastFetch = debounce(last(fetch));
// the debounced effect (only run when inactive for 300ms)
const effect = debounce(
  (pageNumber, setLoading, updateState) => {
    //only resolve when it was the last user action
    lastFetch(`https://abcde/?page=${pageNumber}`, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        Authorization: 'Token',
      },
    })
      .then((response) => response.json())
      .then((json) => {
        setLoading(false);
        //pass callback to upateState so cardsState is not
        //  a dependency of the effect
        updateState((cardsState) => ({
          ...cardsState,
          cardIndex: 0,
          cards: [...cardsState.cards, ...json.data],
        }));
      })
      .catch((error) => {
        console.error(error);
      });
  }
);

useEffect(() => {
  //debounced and resolve last
  effect(cardsState.pageNumber, setLoading, updateState);
  //if you don't add pageNumber then pageNumber will be
  //  a stale closure and request with new pageNumber
  //  will never be made
}, [cardsState.pageNumber, cardsState.currentCardIndex]);