React+TypeScript集成Pdftron WebViewer触发更新深度超限错误

错误信息 #

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array or one of the dependencies changes on every render.

问题场景 #

尝试两种方式集成WebViewer均触发上述错误：

1. 按钮点击触发加载
2. useEffect初始化加载

解决方案 #

核心问题是WebViewer初始化时会修改DOM结构，导致React组件重复渲染，进而重复执行初始化逻辑，形成循环。通过添加初始化标记，限制WebViewer仅执行一次初始化即可解决。

方案1：按钮触发加载（带初始化标记） #

import { useEffect, useRef } from "react";
import WebViewer from "@pdftron/webviewer";

const MyComponent = (): JSX.Element => {
  const viewer = useRef<HTMLDivElement>(null);
  const isViewerInitialized = useRef(false); // 标记是否已完成初始化

  const loadViewer = () => {
    // 已初始化或容器不存在则直接返回
    if (isViewerInitialized.current || !viewer.current) return;
    
    WebViewer(
      {
        path: "/webviewer/lib",
        initialDoc: "/files/pdftron_about.pdf",
      },
      viewer.current
    ).then(() => {
      // 初始化完成后标记，防止重复执行
      isViewerInitialized.current = true;
    });
  };

  return (
    <div className="MyComponent">
      <div className="header">React sample</div>
      <button onClick={loadViewer}>加载PDF</button>
      <div className="webviewer" ref={viewer} style={{ height: "100vh" }}></div>
    </div>
  );
};

export default MyComponent;

方案2：useEffect初始化加载（带初始化标记） #

import { useEffect, useRef } from "react";
import WebViewer from "@pdftron/webviewer";

const MyComponent = (): JSX.Element => {
  const viewer = useRef<HTMLDivElement>(null);
  const isViewerInitialized = useRef(false);

  useEffect(() => {
    if (isViewerInitialized.current || !viewer.current) return;

    WebViewer(
      {
        path: "/webviewer/lib",
        initialDoc: "/files/pdftron_about.pdf",
      },
      viewer.current
    ).then(() => {
      isViewerInitialized.current = true;
    });
  }, []); // 空依赖数组确保useEffect仅执行一次

  return (
    <div className="MyComponent">
      <div className="header">React sample</div>
      <div className="webviewer" ref={viewer} style={{ height: "100vh" }}></div>
    </div>
  );
};

export default MyComponent;

额外说明 #

• 如果需要切换文档，不要重复初始化WebViewer，而是通过WebViewer返回的实例调用instance.loadDocument(newDocPath)方法实现
• 确保path配置的WebViewer资源路径正确，资源加载失败可能引发其他异常

内容的提问来源于stack exchange，提问作者feres