Лучшая практика использования SetInterval без классов в React - PullRequest
Новая
       58

Лучшая практика использования SetInterval без классов в React

0 голосов
/ 16 июня 2020

В рамках моего обучения React я написал простой таймер. После того, как таймер достигает конца (с useEffect), он не входит в функцию buttonString после хука useEffect, потому что measurement не является частью состояния приложения, поэтому HTML isn ' t рендеринг.

Как правильно поступить в такой ситуации? Мне кажется, что вставка идентификатора setInterval в ловушку неверна, но я не уверен.

Спасибо

Код: 

var measurement;
export default function App() {
  const [timeLeft, setTimeLeft] = useState("10000");
  useEffect(() => {
    if (timeLeft<500) {
      clearInterval(measurement);
      measurement = null;
    } 
  }); 

  function buttonString() {
    console.log('[buttonString] measurement:' + measurement);
    return ((measurement!==null) && (measurement!==undefined)) ? "reset" : "Click To Start";
  }

  function timeLeftAsString() {    
    let duration = moment.duration(timeLeft);
    let mins = duration.minutes();
    let secs = duration.seconds();        

    return mins + " : " + secs;
  }  

  function startMeasurement() {
    clearInterval(measurement);
    var timeStart = moment().add(11, 's');
    measurement = setInterval(() => {
      setTimeLeft(moment(timeStart).diff());
      }, 500);    
    }       


  return (
    <div className="App">
      <p> {timeLeftAsString()} </p>
      <Button variant="primary" size="lg" className="Button" onClick={() => {
        startMeasurement();
      }}>
        {buttonString()}
      </Button>
    </div>
  );
}
...