pdftron 反应打字稿下一个错误：在同一 HTML 元素上创建了两个 WebViewer 实例

Question

我正在尝试使用 apryse docx 编辑器中的 pdftron 我可以正常使用 docx 编辑器，但我不断收到如下图所示的错误

这些是我的代码

wordeditor.tsx

"use client";
import { useEffect, useRef } from "react";
import WebViewer from "@pdftron/webviewer";
// const WebViewer = dynamic((): any => import('@pdftron/webviewer'), {ssr: false});

const licenseKey =
  "";

const WordEditor = () => {
  const viewerDiv = useRef<any>(null);

  useEffect(() => {
    WebViewer(
      {
        path: "/webviewer/lib",
        licenseKey: licenseKey,
        initialDoc:
          "https://pdftron.s3.amazonaws.com/downloads/pl/legal-contract.docx",
        enableOfficeEditing: true,
      },
      viewerDiv.current
    ).then((instance) => {
      const { documentViewer } = instance.Core;
      // you can now call WebViewer APIs here...
    });
  }, []);

  return (
    <div className="webviewer" ref={viewerDiv} style={{ height: "100%" }}></div>
  );
};

export default WordEditor;

然后将其作为组件插入我的 page.tsx

import dynamic from 'next/dynamic';
const WebViewer = dynamic((): any => import('./wordeditor'), {ssr: false});

const WordEditor = () => {

    return (
        <div className='w-full h-full'>
            <WebViewer/>
        </div>
    );
}

export default WordEditor;

任何人都可以帮我解决这个错误吗？我已经尝试过在其他问题中搜索，但我仍然无法修复此错误，特别是在 React TypeScript Next JS 中

至于我使用的套餐

• “下一个”：“13.5.4”
• “反应”：“^18.2.0”
• “@pdftron/webviewer”：“^10.5.1”

先谢谢了。

Answer 1

更新。我通过将 WebViewer 承诺更改为异步解决了这个问题，它的工作原理是将其更改为异步的代码：

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

const licenseKey =
  "";

const WordEditor = () => {
  const viewer = useRef<any>(null);

  useEffect(() => {
    const callView = async () => {
      try {
        const docx = await WebViewer(
          {
            path: "/webviewer/lib",
            licenseKey: licenseKey,
            enableOfficeEditing: true,
          },
          viewer.current
        )
        const { Core, UI } = docx;
        const { documentViewer, annotationManager, Annotations, Tools } = Core;
      } catch (error) {
        console.log('viewer error ==> ', error)
      }
    }
    callView()
  }, []);

  return (
    <div id="viewer" className="webviewer" ref={viewer} style={{ height: "100%" }}></div>
  );
};

干杯！

Answer 2

该问题很可能是由于 React 18 中的更改导致 useEffect 在开发版本中被调用两次。 您可以阅读有关此内容的更多信息 https://apryse.com/blog/two-instances-of-webviewer-warning-and-fix