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的第二个参数传递，这样做是为了防止在值未更改的情况下产生副作用。

setInterval不适用于useState挂钩

1 个答案: