javascript - 用循环反应 setTimeout

Question

我正在从 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]);

标签： javascriptreactjssettimeout