javascript - React Hooks 没有更新

Question

我是一名学生，对混乱的代码感到抱歉。问题是startTime钩子。我将其初始化为 0，然后Date.now()在startTimer函数中将其设置为。但是直到我第二次按下它才会更新。为什么是这样？

我评论了问题出在哪里。如果有问题也很抱歉，这是我的第一篇文章。

import React, { useState } from 'react';
//import { render } from '@testing-library/react';

function Stopwatch() {

  const [milliSecondsHook, setMilliSecondsHook] = useState(0);
  const [secondsHook, setSecondsHook] = useState(0);
  const [minutesHook, setMinutesHook] = useState(0);
  const [hoursHook, setHoursHook] = useState(0);
  const [running, setRunning] = useState(2);
  const [id, setId] = useState(0);
  const [split, setSplit] = useState(0);
  const [startTime, setStartTime] = useState(0);

  function toggleRunning() {
    running ? setRunning(0) : setRunning(1);
    if(running == 1) {
      setRunning(0);
    } else if(running == 0) {
      setRunning(1);
    } else {
      setRunning(1);
    }
  }

  function pauseTimer(id) {
    startTimer();
  }

  const milliSeconds = (diff) => diff % 1000 / 10 //milliseconds
  const seconds = (diff) => (diff / 1000) % 60; //seconds
  const minutes =(diff) => (diff / 1000 / 60) % 60; //minutes
  const hours = (diff) => diff / 1000 / 60 / 60; //hours

  function timer(startTime) {
    var intervalId = setInterval(function() {

      let currentTime = Date.now();
      let diff = currentTime - startTime;
      setMilliSecondsHook(Math.trunc(milliSeconds(diff)));
      setSecondsHook(Math.trunc(seconds(diff)));
      setMinutesHook(Math.trunc(minutes(diff)));
      setHoursHook(Math.trunc(hours(diff)));

    }, 50);
    return intervalId;
  }

  function startTimer() {
    console.log(running);
    if(running == 2) {
      setStartTime(Date.now()); //this is the problem, it doesnt update the render.
    }

    toggleRunning();

    if(running == 0 || running == 2) {
      clearInterval(id);
      setId(timer(startTime));
    } else if (running == 1) {
      clearInterval(id);
    }
  }

  function splitTime() {
    //copy hooks
  }


if(running == 0) {
  return (
    <div>
      <div>{milliSecondsHook}:{secondsHook}:{minutesHook}:{hoursHook}</div>
      <input type="submit" value="start" onClick={startTimer}></input>
      <input type="submit" value="split" onClick={splitTime}></input>
    </div>
  )
}
if(running == 2) {
  return (
    <div>
      <div>{milliSecondsHook}:{secondsHook}:{minutesHook}:{hoursHook}</div>
      <input type="submit" value="start" onClick={startTimer}></input>
      <input type="submit" value="split" onClick={splitTime}></input>
    </div>
  )
}
else if(running == 1) {
  return (
    <div>
      <div>{milliSecondsHook}:{secondsHook}:{minutesHook}:{hoursHook}</div>
      <input type="submit" value="pause" onClick={pauseTimer}></input>
      <input type="submit" value="split" onClick={splitTime}></input>
    </div>
  )
} else {
  return (
    <div>
      <div>{milliSecondsHook}:{secondsHook}:{minutesHook}:{hoursHook} wrong</div>
      <input type="submit" value="start" onClick={startTimer}></input>
      <input type="submit" value="split" onClick={splitTime}></input>
    </div>
  )
}

}

export default Stopwatch; 

标签： javascriptreactjs