如何使用 react-compound-timer getTime() 方法更新组件 state

Question

I'm creating a component to track the time that takes to do a task. And I'm using react-compound-timer to do that.

The problem I'm having is that I am unable to update the component state when clicking the 'stop' button.

This is the code:

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;

If I log to the console 'actualTime' it properly has the value of the getTime() method when clicking the stop button.

But the component state is not updated. I've tried several other potential solutions, like trying to pass through props the "setTimerValue" function, but it doesn't work.

How can I solve this?

Thanks for your time.

Answer 1

Your problem is that you are sending actualTime via stop that is not possible, stop is just a method to notify Timer to stop so you can't send param to it. Update your code as follow:

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

Also use useEffect to see updated value:

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

My codesandbox link to see the updated code: https://codesandbox.io/s/react-hooks-counter-demo-o5ebq?file=/src/Timer.js