Javascript 如何使用react component timer getTime（）方法更新组件状态

我正在创建一个组件来跟踪执行任务所需的时间。我过去经常这样做

我遇到的问题是，单击“停止”按钮时无法更新组件状态

代码如下：

import React, { useState } from 'react';
import Timer from 'react-compound-timer'
import clock from '../../../assets/images/clock-regular.svg'
import playIcon from '../../../assets/images/play.svg';
import pauseIcon from '../../../assets/images/pause.svg';
import stopIcon from '../../../assets/images/stop.svg';
import resetIcon from '../../../assets/images/reset.svg';

const LogTimer = () => {
  const [timerValue, setTimerValue] = useState(null);

  return (
    <Timer
      formatValue={(value) => `${(value < 10 ? `0${value}` : value)}`}
      initialTime={0}
      startImmediately={false}
      onStart={() => console.log('onStart')}
      onPause={() => console.log('onPause')}
      onStop={(value) => {
        setTimerValue(value);
        console.log('onStop')
      }}
      onReset={() => console.log('onReset')}
>
    {({ start, pause, stop, reset, getTime }) => 
      ( 
        <>
          <div className="d-flex align-items-center justify-content-between">
            <div className="d-flex align-items-center">
              <img src={clock} alt="clock" className="pr-2" style={{ width: '1.75rem' }}/><Timer.Hours />:<Timer.Minutes />:<Timer.Seconds /> 
            </div>
          </div>
          <div className="d-flex justify-content-between" style={{ minWidth: '9rem' }}>
            <img src={playIcon} className="control-btn" alt='play' role='button' onClick={start}></img>
            <img src={pauseIcon} className="control-btn" alt='pause' role='button' onClick={pause}></img>
            <img src={stopIcon} className="control-btn" alt='stop' role='button' onClick={
              () => {
                const actualTime = getTime();
                stop(actualTime);
              }
              }></img>
            <img src={resetIcon} className="control-btn" alt='reset' role='button' onClick={reset}></img>
          </div>
        </>
    )}
</Timer>
  )
}

export default LogTimer;

import React，{useState}来自“React”；
从“反应复合计时器”导入计时器
从“../../../assets/images/clock regular.svg”导入时钟
从“../../assets/images/play.svg”导入playIcon；
从“../../../assets/images/pause.svg”导入PauseCon；
从“../../../assets/images/stop.svg”导入stopIcon；
从“../../../assets/images/reset.svg”导入resetIcon；
常量日志计时器=（）=>{
常量[timerValue，setTimerValue]=useState（null）；
返回(
`${（值<10？`0${value}`:value）}`}
初始时间={0}
startImmediately={false}
onStart={（）=>console.log（'onStart'）}
onPause={（）=>console.log（'onPause'）}
顶部={（值）=>{
setTimerValue（值）；
console.log（'onStop'）
}}
onReset={（）=>console.log（'onReset'）}
>
{（{开始、暂停、停止、重置、获取时间}）=>
( 
:: 
{
const actualTime=getTime（）；
停止（实际时间）；
}
}>
)}
)
}
导出默认日志计时器；

如果我登录到控制台'actualTime'，当单击stop按钮时，它正确地具有getTime（）方法的值

但组件状态不会更新。我尝试过其他几种可能的解决方案，比如尝试通过道具传递“setTimerValue”函数，但它不起作用

我怎样才能解决这个问题

---

谢谢您的时间。

您的问题是您正在通过stop发送实际时间，这是不可能的，stop只是一种通知计时器停止的方法，因此您无法向其发送参数。按如下方式更新您的代码：

<img
      className="control-btn"
      alt="stop"
      role="button"
      onClick={() => {
      const actualTime = getTime();
      setTimerValue(actualTime);
      stop();
     }}
/>

---

查看更新代码的My code Sandbox链接：

我已检查此代码，所有内容似乎都正常工作，状态正在更新，….您的情况下timerValue正在更新？如何检查timerValue？？setTimerValue是异步的，因此您应该在调用setTimerValue之后通过useEffect检查它的值，而不是直接在调用setTimerValue之后。我尝试在控制台中记录它，只是在单击stop按钮时调用stop（actualTime）之后。但是它似乎没有到达setTimerValue来实际更新状态，因此它返回null（初始状态）。我发现了问题，请查看我的答案和我的codesandbox链接。

useEffect(() => {
    console.log("timerValue: " + timerValue);
}, [timerValue]);