React native 如何防止setInterval清除计数器

我很难在react native with hooks上使用setInterval

我在网上看到了一些关于它的资料，我正在使用这个自定义钩子，它使用状态计数器来显示数组中的当前元素，随着时间的推移，计数器会增加，但在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>
);

const SensorsDetail=（{evaluation}）=>{
常量[状态]=使用状态（评估）；
const[count，setCount]=useState（0）
const[running，setRunning]=useState（false）
const cb=useRef（）
const id=useRef（）
const start=（）=>setRunning（真）
const pause=（）=>setRunning（false）
常数重置=（）=>{
setRunning（错误）
设置计数（0）
}
函数回调（）{
设置计数（计数+1）
}
//保存当前回调以在每次渲染时向计数中添加正确的数字
useffect（（）=>{
cb.current=回调
})
useffect（（）=>{
//此函数将调用之前在effect中加载的cb.current，并始终使用当前计数值引用正确的回调函数。
函数tick（）{
cb.current（）
}
if（正在运行&！id.current）{
id.current=设置间隔（勾号250）
}
如果（！running&&id.current）{
清除间隔（id.current）
id.current=null
}
return（）=>id.current&&clearInterval（id.current）
}，[正在运行]）
返回(
{state.dados_sensor_1[count]}
{state.dados_sensor_2[count]}
{state.dados_sensor_3[count]}
{state.dados_传感器_4[计数]}
开始
暂停
重置
);

---

})

这很愚蠢，但在研究了更多之后，我发现实际上发生的是计数器超过了数组大小，这就是为什么它显示空白值

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

虽然重置有时仍会出错…

这是自定义挂钩的代码：

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
    }

从'react'导入{useState，useffect，useRef}；
导出默认值（初始计数、最终计数、自动启动）=>{
const[count，setCount]=useState（initialCount）
const[running，setRunning]=useState（自动启动）
const cb=useRef（）
const id=useRef（）
常量开始=（）=>{
如果（计数<最终计数）{
setRunning（真）
}
}
const pause=（）=>setRunning（false）
常数重置=（）=>{
setRunning（假）；
设置计数（初始计数）
}
函数回调（）{
设置计数（计数+1）
如果（计数==最终计数）{
setRunning（错误）
}
}
useffect（（）=>{
cb.current=回调
})
useffect（（）=>{
函数tick（）{
cb.current（）
}
if（正在运行&！id.current）{
id.current=设置间隔（勾号250）
}
如果（！running&&id.current）{
清除间隔（id.current）
id.current=null
}
return（）=>id.current&&clearInterval（id.current）
}，[正在运行]）
返回{
计数
开始
暂停，
重置
}

})