javascript - React中的setInterval更新状态但不识别时间何时为0

Question

我正在练习 React useState hooks 来制作一个每十秒重置一次的测验计时器。我现在拥有的是每秒更新状态，并且 p 标签相应地呈现。但是当我 console.log(seconds) 每次都显示 10 时，因此条件 (seconds === 0) is never met 。在 Chrome 的 React DevTools 中，状态也在相应地更新。我在这里做错了什么？

import React, {useState } from 'react';

function App() {

  const [seconds, setSeconds] = useState(10);

  const startTimer = () => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds - 1);

      // Logs 10 every time
      console.log(seconds)

      // Never meets this condition
      if (seconds === 0) {
            clearInterval(interval)
      }
    }, 1000);
  }

  return (
    <div>
      <button onClick={() => startTimer()}></button>
      // updates with current seconds
      <p>{seconds}</p>
    </div>
  )
}

export default App;

Answer 1

这是因为 setSeconds 在每个刻度上都使用新变量更新状态，但初始引用(秒 === 10)仍然指向初始设置变量。这就是为什么它停留在 10 => 初始引用。
要获取当前值，您必须在 setSeconds 变量(以秒形式传递)中检查它，如下所示:

const startTimer = () => {
    const interval = setInterval(() => {
      setSeconds(seconds => {
        if(seconds < 1) {
          clearInterval(interval);
          return 10;
        }
        return seconds - 1;
      });
    }, 1000);
  }

这是一个有效的sandbox
您还应该在一个函数中将变量重命名为两次不同的名称(秒)。