Question

我正在努力使用带有钩子的本机反应上的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>
);

};

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清除计数器

1 个答案: