setInterval Не работает с хуком useState - PullRequest
Новая
       24

setInterval Не работает с хуком useState

0 голосов
/ 15 января 2020

В этом коде есть две кнопки, которые должны включать и отключать 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>

 )

1 Ответ

1 голос
/ 15 января 2020

Вы не обновляете свое состояние после остановки таймера, поэтому компонент не обновляется. Возможно, вы захотите использовать хук 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]);

, а затем просто передайте setShouldCount count с true / false событию onPress.

EDIT: также я забыл поставить массив значений в качестве второго аргумента для useEffect, это сделано для предотвращения повторного рендеринга компонента, если значения не изменились.

...