Как получить доступ к текущему state в setInterval?

Question

Состояние 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>
  );
}

Answer 1

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

оно?

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;

БЛОГ НА HUSL

Как получить доступ к текущему state в setInterval?

Ответы (1 шт):