1

Состояние timer всегда остается начальным и меняется только в рендере. Как получить текущее значение счетчика и сбросить интервал по достижению нужного значения?

import React from "react";

import "./styles.css";

export default function App() {
  const [timer, setTimer] = React.useState(10)
  React.useEffect(()=> {
    let interval = setInterval(()=>{
      setTimer((value) => value - 1)
      if(timer === 5) {
        clearInterval(interval)
      }
    }, 1000)
    return () => clearInterval(interval)
  }, [])

  return (
      <div className="App">
        <h2>{timer}</h2>
      </div>
  );
}

1 ответ 1

2

сбросить интервал по достижению нужного значения

оно?

import React from "react";

const App = () => {
  const [timerState, setTimerState] = React.useState(10);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setTimerState((previousState) => previousState - 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  React.useEffect(() => {
    if (timerState === 5) {
      setTimerState(10);
    }
  }, [timerState]);

  return (
    <div>{timerState}</div>
  );
};

export default App;

1
  • 1
    да, только я еще поместил сам интервал в state чтоб сбрасывать его при достижении timerState === 5
    – Georg
    Commented 12 дек. 2020 в 18:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.