reactjs - React中的setInterval不会更新setState

Question

我想制作一个倒计时器(25 分钟)。这是App.js文件中的代码

import './App.css';
import React, { useState } from 'react';

function App() {
  const [remainingTime, setRemainingTime] = useState(1500);
  const [seconds, setSeconds] = useState(0);
  const [minute, setMinute] = useState(remainingTime/60);

  function timer() {
    setRemainingTime(remainingTime-1);
    let newMinute = remainingTime/60;
    let minuteArray = [...newMinute.toString()];
    setMinute(parseInt(minuteArray.slice(0,2).join("")));
    setSeconds(remainingTime%60);
    console.log(minute);
    console.log(seconds);
  }

  return (
    <div className="App">
      <div className="pomodoro">
        <div className="timer">{minute}:{seconds}</div>
        <div className="button-container">
          <button className="start" onClick={() => setInterval(timer, 1000)}>start</button>
        </div>
      </div>
    </div>
  );
}

export default App;

该间隔不会更新状态值。分钟值始终为 25，秒值始终为 0。当我不使用 setInterval 并仅使用这样的计时器函数时

<button className="start" onClick={timer}>start</button>

每次我单击开始按钮时，该值都会发生变化。任何想法？我知道我也应该使用clearInterval，但我不知道该把它放在哪里。我应该创建一个包含 setInterval 和clearInterval 的新函数吗？

Answer 1

问题

主要问题是 timer 回调中的状态陈旧。

在间隔回调中，设置新值的标准形式不起作用，因为回调每次运行时都会使用相同的(未更新的)状态值:

——这不起作用: setValue(value + 1)

解决方案

使用设置新值的替代形式:

——这将起作用: setValue((value) => value + 1)

这种形式允许回调在每次运行时获取具有最新状态的新值。

详细信息

1. 分钟和秒被认为是派生状态(来自remainingTime)，所以它不应该也存储在状态中，它很容易根据状态计算。
2. 使用功能状态更新来更新先前状态的 remainingTime 状态，而不是回调排队的渲染周期的状态。
3. 使用 React ref 来保存间隔计时器 ref，以便可以清除间隔。
4. 使用 useEffect Hook 返回清理函数，以在组件卸载时清除任何运行间隔。

代码:

function App() {
  const timerRef = React.useRef();

  React.useEffect(() => {
    return () => clearInterval(timerRef.current);
  }, []);

  const [remainingTime, setRemainingTime] = React.useState(1500);

  function timer() {
    setRemainingTime((remainingTime) => remainingTime - 1);
  }

  const startTimer = () => {
    clearInterval(timerRef.current);             // clear any running interval
    setRemainingTime(1500);                      // reset state back to 25 minutes
    timerRef.current = setInterval(timer, 1000); // start/restart interval
  };

  const minute = String(Math.floor(remainingTime / 60)).padStart(2, 0);
  const seconds = String(remainingTime % 60).padStart(2, 0);

  return (
    <div className="App">
      <div className="pomodoro">
        <div className="timer">
          {minute}:{seconds}
        </div>
        <div className="button-container">
          <button className="start" onClick={startTimer}>
            start
          </button>
        </div>
      </div>
    </div>
  );
}

演示

由于这可能是一个后续问题，因此使用另一个 useEffect 来“监听”remainingTime 状态，当时间达到 0 时，清除间隔，将remainingTime重置回1500(用于显示)，并显示任何闹钟或警报或番茄休息/时间表的任何内容。