用Loop反应setTimeout

编程问答 2022-07-21

问题描述

我正在从Firebase中提取文档，对它们运行计算并将结果分成一个数组。我有一个事件监听器，可以在填充新数据时使用新数据更新该数组。

我正在使用setTimeout遍历一个与初始数据加载完美配合的数组，但是偶尔，当该数组更新为新信息时，setTimeout出现故障，或者从头开始遍历而不是继续循环，或造成视觉问题，使循环加倍。

一切都存在于useEffect内，以确保仅在侦听器找到新数据时才映射数据更改。我想知道是否需要找到一种方法来使setTimeout超出此效果？我有什么需要避免的东西吗？

const TeamDetails = (props) => {
const [teamState,setTeamState] = useState(props.pushData)
const [slide,setSlide] = useState(0)

useEffect(() => {
  setTeamState(props.pushData)
},[props.pushData])

   
  useEffect(()=> {

  const teams = teamState.filter(x => x.regData.onTeam !== "null" && x.regData.onTeam !== undefined)
  const listTeams = [...new Set(teams.map((x) => x.regData.onTeam).sort())];
 
  
  const allTeamData = () => {

   
    let array = []
    listTeams.forEach((doc) => {
      //ALL CALculaTIONS HAPPEN HERE
    }
    array.push(state)
    })
    return array
  }


function SetData() {
  var data = allTeamData()[slide];
  //THIS FUNCTION BREAKS DOWN THE ARRAY INTO INDIVIDUAL HTML ELEMENTS
} 



SetData()

setTimeout(() => {
  if (slide === (allTeamData().length - 1)) {
    setSlide(0);
  }
  if (slide !== (allTeamData().length - 1)) {
    setSlide(slide + 1);
  }
  SetData();
    console.log(slide)
  },8000)
},[teamState,slide]);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreactjsreactjsreactjsreactjssettimeout