反应原生 setInterval 触发太快（使用 expo）

Question

我为 react native 制作了一个计时器挂钩， from道具计数to道具。 It returns the current value of timer in seconds, start function, stop function, restart function and pause function in an object. 这是定时器代码：

import { useState, useEffect, useRef } from 'react'

export default function useTimer({ from, to, intervalS, finished }) {
    const [timer, setTimer] = useState(from)
    const interval = useRef()

    const start = () => {
        if (!interval.current) {
            interval.current = setInterval(() => {
                setTimer(timer => timer - intervalS)
            }, intervalS * 1000)
        }
    }

    const pause = () => {
        clearInterval(interval.current)
        interval.current = null
    }

    const stop = () => {
        clearInterval(interval.current)
        interval.current = null
        setTimer(from)
    }

    const restart = () => {
        clearInterval(interval.current)
        interval.current = null
        setTimer(from)
        start()
    }

    useEffect(() => {
        return () => {
            clearInterval(interval.current)
        }
    }, [])

    useEffect(() => {
        if (timer === to) {
            finished()
            clearInterval(interval.current)
        }
    }, [timer])

    return {
        value: timer,
        start,
        pause,
        restart,
        stop
    }
}

一切正常，但是当我尝试渲染（甚至console.log ）计时器值时，它的计数比应该的要快。 例如，计时器将实时每 15 秒通过 20 秒。 我正在使用Expo Go应用程序进行开发，我的设备是 android 手机。 难道我做错了什么？ 这是我如何使用计时器：

export default function Countdown() {
    const [finished, setFinished] = useState(false)
    const timer = useTimer({ from: 60, to: 0, intervalS: 1, finished: () => setFinished(true) })

    return (
            <View style={{ alignItems: 'center' }}>
                <Typography variant="heading">{timer.value}</Typography>
                <Button title="start" onPress={timer.start} />
                <Button title="pause" onPress={timer.pause} />
                <Button title="restart" onPress={timer.restart} />
                <Button title="stop" onPress={timer.stop} />
            </View>
    )
}

Answer 1

我之前使用这种方法创建了一个计时器：

//Initially set to 60 secs
const [intervalID, setIntervalID] = useState<any>(null)

useEffect(() => {
    setIntervalID(setInterval(() => {
        updateTimer();
    }, 1000));

    return () => clearInterval(intervalID);
}, [])

useEffect(() => {
    if (testTime <= 0) {
        //Timer hit zero

        return () => clearInterval(intervalID)
    }
}, [testTime])

const updateTimer = () => {
    setTestTime(testTime => testTime - 1)
}

function displayTime(seconds) {
    const format = val => `0${Math.floor(val)}`.slice(-2)
    const minutes = (seconds % 3600) / 60

    return [minutes, seconds % 60].map(format).join(':')
}

const getRemainingTime = () => {
    let finalTime = displayTime(testTime)
    return <Text style={{ alignSelf: 'center' }}>{finalTime} minutes left</Text>
}

Answer 2

对于任何可能想知道出了什么问题的人来说，问题出在 expo 的开发模式上。 我不知道为什么，但似乎在世博会的开发模式下时间更快。 只需将开发模式切换到生产模式，时间就会变得正常

Answer 3

我的 Expo 应用程序遇到了同样的问题。

只需禁用“调试远程 JS”就可以了！