时间戳

首页 > 解决方案 > 如何返回由 4 个对象组成的数组的前 2 个对象

javascript - 如何返回由 4 个对象组成的数组的前 2 个对象

问题描述

我想返回 4 个对象数组的前 2 个对象，然后在 5 秒之间添加另外两个对象。

注意：我正在反转复制的数组revEvents ，reverse()因为项目按日期/时间降序排列，最近的项目排在最前面。

我当前的问题是前两个对象显示正常，然后 5 秒后，它只加载第三个对象并停止。

 useEffect(() => {
   let ms = 3000
   let i = 0
   let displayedEvents = [...props].splice(i, 2)
   setEventsProps(displayedEvents.reverse())
   const interval = setInterval(() => {
     if (++i <= props.length) {
       displayedEvents = props.splice(0, i + 2)
       setEventsProps(displayedEvents.reverse())
      }
    }, ms)
    return () => { clearInterval(interval) }
    }, [])

 //JSX as below
 displayedEvents.map(event () => ...etc

标签： javascriptarraysreactjssetintervalsplice

解决方案

我想分享一个改进的解决方案。

   useEffect(() => {
        const ms = 5000
        let i = 2
        const displayedEvents: IEventsProps = props.slice(0, 2)
        setEventsProps(displayedEvents.reverse())
        let interval: NodeJS.Timeout = setInterval((): void => {
            if (i < props.length) {
                displayedEvents.push(props[i])
                setEventsProps(displayedEvents.reverse())
                i += 1
            } else {
                clearInterval(interval)
                interval = null
            }
        }, ms)
        return () => { if (interval) { clearInterval(interval) } }
    }, [])

这避免了通过改变同一个数组来创建不必要的新数组，并且在工作完成时也清除了间隔，因此它不会永远运行。

推荐阅读