如何防止 setInterval 清除计数器

Question

我在使用 setInterval 对 react native 进行挂钩时遇到困难；

我在网上看到了一些关于它的材料，我正在使用这个自定义挂钩，它使用状态计数器来显示数组中的当前元素，超时计数器增加但它变为空白完成 setInterval 的生命周期后；

如何将其设置为保留最新值或在完成后重置为第一个值？
还有重置按钮有时会出错，它尝试重置，但又停在了之前的位置，我做错了什么吗？

到目前为止我的代码：

const SensorsDetail = ({ evaluation }) => {

const [ state ] = useState(evaluation);
const [count, setCount] = useState(0)
const [running, setRunning] = useState(false)
const cb = useRef()
const id = useRef()
const start = () => setRunning(true)
const pause = () => setRunning(false)
const reset = () => {
    setRunning(false)
    setCount(0)
}
function callback () {
  setCount(count + 1)
}

// Save the current callback to add right number to the count, every render
useEffect(() => {
  cb.current = callback
})

useEffect(() => {
  // This function will call the cb.current, that was load in the effect before. and will always refer to the correct callback function with the current count value.   
  function tick() {
    cb.current()
  }
  if (running && !id.current) {
    id.current = setInterval(tick, 250)
  }

  if (!running && id.current) {
    clearInterval(id.current)
    id.current = null
  }
  return () => id.current && clearInterval(id.current)
}, [running])

return(
    <View style={styles.view}>
        <Card>
            <Text style={styles.text}>{state.dados_sensor_1[count]}</Text>
        </Card>
        <Card>
            <Text style={styles.text}>{state.dados_sensor_2[count]}</Text>
        </Card>
        <Card>
            <Text style={styles.text}>{state.dados_sensor_3[count]}</Text>
        </Card>
        <Card>
            <Text style={styles.text}>{state.dados_sensor_4[count]}</Text>
        </Card>
        <TouchableOpacity onPress={start} style={styles.buttonStyle}>
            <Text style={styles.textStyle2}>
                Start
            </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={pause} style={styles.buttonStyle}>
            <Text style={styles.textStyle2}>
                Pause
            </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={reset} style={styles.buttonStyle}>
            <Text style={styles.textStyle2}>
                Reset
            </Text>
        </TouchableOpacity>
    </View>
);

};

Answer 1

这很愚蠢，但在进一步研究之后，我发现实际上发生的事情是计数器超过了数组大小，这就是它显示空白值的原因；

我只是为计数器可以增加的值添加了一个限制，它工作得很好；

尽管重置有时仍然存在问题...

这是自定义挂钩的代码：

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

export default (initialCount, finalCount, autoStart) => {

    const [count, setCount] = useState(initialCount)
    const [running, setRunning] = useState(autoStart)
    const cb = useRef()
    const id = useRef()
    const start = () => {
        if (count < finalCount){
            setRunning(true)
        }
    }
    const pause = () => setRunning(false)
    const reset = () => {
        setRunning(false);
        setCount(initialCount)
    }
    function callback () {
        setCount(count + 1)
        if (count == finalCount){
            setRunning(false)
        }
    }


    useEffect(() => {
        cb.current = callback
    })

    useEffect(() => {

        function tick() {
            cb.current()
        }
        if (running && !id.current) {
            id.current = setInterval(tick, 250)
        }

        if (!running && id.current) {
            clearInterval(id.current)
            id.current = null
        }
        return () => id.current && clearInterval(id.current)
    }, [running])

    return {
    count,
    start,
    pause,
    reset
    }

};

如何防止 setInterval 清除计数器

How to prevent setInterval from clearing the counter

hook

setinterval

react-native