setInterval 不适用于 useState 挂钩

Question

在此代码中，有两个按钮应启用和禁用 ProgressBar。我在两个独立的函数中使用 setInterval 方法来启用 ProgressBar 和clearInterval 来禁用 ProgressBar。第一个按钮可以工作，但第二个按钮（禁用按钮）不起作用您知道我该如何修复它吗？

 let [ProgresValue, setProgresValue] = useState(0);

    var ID = null;

    const StartProgress = () => {
        ID = setInterval(() => {
            if (ProgresValue <= 1) {
                setProgresValue(ProgresValue = ProgresValue + 0.01)}
        }, 100);}




    const StopProgress = () => {

         clearInterval(ID); }

这是返回部分：

return (
        <Fragment>
            <Text>Progress Bar:{parseFloat((ProgresValue * 100).toFixed(3))}%</Text>

            {
                (Platform.OS === 'android')
                    ?
                    (<ProgressBarAndroid
                        styleAttr='Horizontal'
                        indeterminate={false}
                        progress={ProgresValue}
                        style={{ width: 300 }}

                    />)
                    :
                    (<ProgressViewIOS
                        progress={ProgresValue}

                    />) }

 <TouchableHighlight onPress={StartProgress} style={styles.button}><Text style={{ color: 'white', textAlign: 'center' }}>Start Prgress</Text></TouchableHighlight>
 <TouchableHighlight onPress={StopProgress} style={styles.button} ><Text style={{ color: 'white', textAlign: 'center' }} >Stop Progress</Text></TouchableHighlight>

  </Fragment>

 )

Answer 1

停止计时器后您不会更新状态，因此组件不会更新。您可能想使用 useEffect 钩子进行清理。尝试这样的事情：

const [shouldCount, setShouldCount] = useState(false);
const [progressValue, setProgressValue] = useState(0);
useEffect(() => {
   if(shouldCount){
      const interval = setInterval(() => setProgressValue(progressValue + 1),
        1000
      );
      return () => clearInterval(interval);
   }
}, [shouldCount, progressValue]);

然后将 true/false 的 setShouldCount 计数传递给 onPress 事件。

编辑：我还忘记将值数组作为 useEffect 的第二个参数传递，这样做是为了防止在值未更改时运行副作用。