Javascript 反应基石：无法读取属性'；getEnabledElement'；未定义的

我有一个项目，该项目使用了cornerstone.js库的react版本。我正在使用：

我正在创建一个简单的功能组件来在屏幕上渲染画布：

import React, { useState } from "react";
import CornerstoneViewport from "react-cornerstone-viewport";

export const Test = (): JSX.Element => {
  const [cornerstone] = useState({
    tools: [
      // Mouse
      {
        name: "Wwwc",
        mode: "active",
        modeOptions: { mouseButtonMask: 1 },
      },
      {
        name: "Zoom",
        mode: "active",
        modeOptions: { mouseButtonMask: 2 },
      },
      {
        name: "Pan",
        mode: "active",
        modeOptions: { mouseButtonMask: 4 },
      },
      // Scroll
      { name: "StackScrollMouseWheel", mode: "active" },
      // Touch
      { name: "PanMultiTouch", mode: "active" },
      { name: "ZoomTouchPinch", mode: "active" },
      { name: "StackScrollMultiTouch", mode: "active" },
    ],
    imageIds: [
      "dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.11.dcm",
      "dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.12.dcm",
    ],
  });

  return (
    <CornerstoneViewport
      tools={cornerstone.tools}
      imageIds={cornerstone.imageIds}
      style={{ minWidth: "100%", height: "512px", flex: "1" }}
    />
  );
};

import React，{useState}来自“React”；
从“CornerStonerViewport”导入CornerStonerViewport；
export const Test=（）：JSX.Element=>{
常量[基石]=使用状态({
工具：[
//老鼠
{
名称：“Wwwc”，
模式：“活动”，
模式选项：{mouseButtonMask:1}，
},
{
名称：“缩放”，
模式：“活动”，
模式选项：{mouseButtonMask:2}，
},
{
名称：“潘”，
模式：“活动”，
模式选项：{mouseButtonMask:4}，
},
//卷轴
{name:“StackScrollMouseWheel”，模式：“active”}，
//触碰
{name:“PanMultiTouch”，模式：“active”}，
{name:“ZoomTouchPinch”，模式：“active”}，
{name:“StackScrollMultiTouch”，模式：“active”}，
],
图像ID：[
"dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.11.dcm",
"dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.12.dcm",
],
});
返回(
);
};

但是我得到了这个错误：

Uncaught (in promise) TypeError: Cannot read property 'getEnabledElement' of undefined
    at _getUUIDFromElement (cornerstoneTools.js?b351:11117)
    at Object.setStartLoadHandler (cornerstoneTools.js?b351:11133)
    at CornerstoneViewport._setupLoadHandlers (index.es.js?be04:10310)
    at CornerstoneViewport._setupLoadHandlers (react-hot-loader.development.js?9cb3:714)
    at CornerstoneViewport._callee$ (index.es.js?be04:9825)
    at tryCatch (index.es.js?be04:194)
    at Generator.invoke [as _invoke] (index.es.js?be04:420)
    at Generator.prototype.<computed> [as next] (index.es.js?be04:246)
    at asyncGeneratorStep (index.es.js?be04:928)
    at _next (index.es.js?be04:950)

Uncaught（in promise）TypeError:无法读取未定义的属性“getEnabledElement”
at_GetuuidBromeElement（cornerstoneTools.js？b351:11117）
在Object.setStartLoadHandler（cornerstoneTools.js？b351:11133）
在CornerStone视口中。\u setupLoadHandlers（index.es.js？be04:10310）
在CornerstoneViewport._setupLoadHandlers（react hot loader.development.js？9cb3:714）
在CornerstoneViewport._callee$（index.es.js？be04:9825）
在tryCatch（index.es.js？be04:194）
在Generator.invoke[as_invoke]（index.es.js？be04:420）
在发电机上。原型。[作为下一个]（index.es.js？be04:246）
在asyncGeneratorStep（index.es.js？be04:928）
at_next（index.es.js？be04:950）

---

有人知道问题出在哪里吗？

在使用视口时，必须先初始化视口，然后才能使用它

在plain JS中，函数如下所示：

import dicomParser from "dicom-parser";
import cornerstone from "cornerstone-core";
import cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";
import cornerstoneMath from "cornerstone-math";
import cornerstoneTools from "cornerstone-tools";
import Hammer from "hammerjs";

export function initCornerstone() {
  // Cornertone Tools
  cornerstoneTools.external.cornerstone = cornerstone;
  cornerstoneTools.external.Hammer = Hammer;
  cornerstoneTools.external.cornerstoneMath = cornerstoneMath;

  //
  cornerstoneTools.init();

  // Preferences
  const fontFamily =
    "Work Sans, Roboto, OpenSans, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif";
  cornerstoneTools.textStyle.setFont(`16px ${fontFamily}`);
  cornerstoneTools.toolStyle.setToolWidth(2);
  cornerstoneTools.toolColors.setToolColor("rgb(255, 255, 0)");
  cornerstoneTools.toolColors.setActiveColor("rgb(0, 255, 0)");

  cornerstoneTools.store.state.touchProximity = 40;

  // IMAGE LOADER
  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
  cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
  cornerstoneWADOImageLoader.webWorkerManager.initialize({
    maxWebWorkers: navigator.hardwareConcurrency || 1,
    startWebWorkersOnDemand: true,
    taskConfiguration: {
      decodeTask: {
        initializeCodecsOnStartup: false,
        usePDFJS: false,
        strict: false,
      },
    },
  });

  // Debug
  window.cornerstone = cornerstone;
  window.cornerstoneTools = cornerstoneTools;
}

在渲染视口之前，必须调用该函数。通常在应用程序中