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

Question

我想返回一个包含 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

Answer 1

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

   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) } }
    }, [])

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

Answer 2

修复了这个问题，而不是使用 splice() 函数，我需要使用 slice() 函数。

代码保持不变，为找到此代码的任何人添加了打字稿。

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