Question

我正在按照Free Code Camp课程here中的描述来建造Pomodoro时钟。

代码here可用。

在Timer组件中，按如下所示的isSessionMode方法（第40行）有条件地切换具有boolean值的startTimer状态。

setIsSessionMode((prev) => !prev);

但是状态似乎没有更新，因为在useEffect调用后，setIsSessionMode()钩中的记录器不会打印状态（行：19）。

useEffect(() => {
      console.log(isSessionMode)
      if (isFirstRun.current) {
        isFirstRun.current = false;
        return;
      }
      audioRef.current.play();
    }, [isSessionMode, audioRef]);

在线return语句中的状态相关日志也是如此：根据如下所示的更新状态，74不会按预期输出值。

{isSessionMode ? "Session" : "Break"}

为什么isSessionMode没有得到更新？

此外，似乎用isSessionMode更新setSessionMode()状态时，会引发如下警告：

Warning: Cannot update a component (`Timer`) while rendering a different component (`App`).

我在网上搜索了一下，但无法追踪。

Answer 1

您不能在另一个状态更新中进行状态更新。

 setTimerLength((prevTimerLength) => {
        if (prevTimerLength > 0) return prevTimerLength - 1;
        setIsSessionMode((prev) => !prev);
        return -1;
      });

尝试将setIsSessionMode移到外面。

反应功能组件setState不更新状态

1 个答案: