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

Posted 2023-02-14

【中文标题】React中的setInterval更新状态但不识别时间何时为0

【英文标题】：setInterval updating state in React but not recognizing when time is 0

【发布时间】：2020-12-15 15:22:31

【问题描述】：

我正在练习 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;

【参考方案1】：

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

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

这是一个有效的sandbox

您还应该在一个函数中将变量重命名为两次不同的名称（秒）。

【讨论】：

谢谢！说得通。所以在 setSeconds 部分，我可以使用任何名称来代替“秒”，对吗？

是的，任何名字都可以。您也可以使用秒数，但不鼓励使用，以免造成混淆。