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 部分：


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，这样做是为了防止运行如果值没有改变而产生副作用。

setInterval 不适用于 useState 挂钩

setInterval Doesn't work with useState hook

javascript

setinterval

clearinterval

reactjs

react-native