仅接收初始状态的 React 箭头函数

Question

我正在做一个由按钮设置的计时器。我确实有一些状态运行但在我的箭头函数 backLunch 中，我只收到 timerR 的初始状态。

这里是代码；

export default function TimeTracker(props) {
  const [buttonLabel, setButtonLabel] = useState("start timer")
  const [buttonAction, setButtonAction] = useState()
  const [timerR, setTimerR] = useState(0)
  let interval

  const startTimer = () =>{
    const startTime = new Date;
    interval = setInterval(async() => {
      
      await setTimerR(new Date-startTime)
    },1000)

    setButtonLabel("lunch brake")
    setButtonAction(()=>lunchBrake)
  }
  const lunchBrake = () =>{
    window.clearInterval(interval);
    setButtonLabel("back from lunch")
    setButtonAction(()=>backLunch)
  }
  const backLunch = () =>{
    const backTime = new Date;
    const totalTime = backTime-timerR;
    interval = setInterval(async() => {
      
      await setTimerR(new Date-totalTime)
    },1000)

    setButtonLabel("back from lunch")
    setButtonAction(()=>goHome)
  }
  
  useEffect(() => {
    setButtonAction(()=> startTimer );
  }, [])



  return (
    <>
      <div className="tracker__header">
        <h2>Time Tracker</h2>
        <span className="tracker__time">
          <FontAwesomeIcon className="icon__default" icon={faClock}/> 
          {fortmatMilliTimer(timerR)}
        </span>
      </div>

      <div className="tracker__buttons">
        <Button type="attention" text={buttonLabel} action={buttonAction} />
        <Button type="default" text="input time" action={e => props.setModal("input")} />
      </div>
    </>
  );

我在 backLunch 函数中收到 timerR=0。如何让它在调用时获得 timerR 的实际状态？

Answer 1

尝试以下操作：-

const backLunch = () =>{
  const backTime = new Date;
  interval = setInterval(async() => {
    await setTimerR((latestTimerRVal) => {
      const totalTime = backTime - latestTimerRVal;
      return new Date-totalTime; // this will be set as new value ofr timerR
    })
  },1000)

  setButtonLabel("back from lunch")
  setButtonAction(()=>goHome)
}

setter函数可以将函数作为arg，以最新的状态值作为参数。这可能会解决问题。

问题就在这里setButtonAction(()=>lunchBrake)。这里timerR的闭包值为0，所以才有问题。

仅接收初始状态的 React 箭头函数

React arrow function receiving the initial state only

reactjs

arrow-functions

react-state

use-state