Next.js在Docker中运行时useState状态更新异常问题

代码中的核心问题及修正 #

1. 错误使用await处理useState更新
   React的setIsMuted是同步更新函数，并非异步Promise，用await包裹会造成无效的异步等待，在Docker打包后的生产环境可能触发异常，直接移除await即可。

2. console.log输出错误
   toggleMute函数里的日志误打印了函数本身toggleMute，应该改为打印当前状态值isMuted。

3. 规避状态更新的闭包陷阱
   直接使用setIsMuted(!isMuted)可能因闭包问题导致状态更新不及时，改用函数式更新setIsMuted(prev => !prev)，确保每次取到最新的前序状态。

修正后的完整代码 #

function Viewer() {
  const [isMuted, setIsMuted] = useState<boolean>(true);

  function toggleMute() {
    updateState();
    console.log("toggleMute isMuted", isMuted);
  }
  
  function updateState() {
    try {
      console.log("isMuted before setIsMuted: ", isMuted);
      setIsMuted(prev => !prev);
    } catch (err) {
      console.error(err);
    }
  }
  

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

  return (
    <>
      <IconButton aria-label="audio" onClick={toggleMute}>
        {isMuted ? <UnmuteIcon /> : <MuteIcon />}
      </IconButton>
      <Component componentProperty={property} muted={isMuted} />
    </>
  );
}

Docker部署额外排查点 #

• 确保Docker镜像使用的Node.js版本和本地开发环境一致，版本差异可能引发语法或运行时兼容问题。
• 锁定依赖版本：提交package-lock.json或yarn.lock到代码仓库，避免Docker构建时安装不一致的依赖包。
• 检查生产打包命令：确认Docker构建脚本中执行了正确的生产打包命令（如npm run build），确保产物是优化后的生产版本。

内容的提问来源于stack exchange，提问作者J.F