时间戳

首页 > 解决方案 > Web-worker 问题：未捕获的 DOMException：无法在“Worker”上执行“postMessage”

reactjs - Web-worker 问题：未捕获的 DOMException：无法在“Worker”上执行“postMessage”

问题描述

我在 React 应用程序中有一个用 chartjs 制作的条形图。它运行良好，但数据解析可以由网络工作者处理，以加快页面加载速度。

我在 useEffect 函数中声明了我的网络工作者：

  let data = React.useRef([]);

  useEffect(() => {
    const dataWorker: Worker = new Worker("./worker.ts");
    dataWorker.postMessage({
      msg: "formatData",
      data: { series, theme, range },
    });
    dataWorker.onmessage = (e: MessageEvent) => {
      if (e && e.data) {
        data.current = e.data;
      }
    };
  }, [range, series, theme]);

并且 webworker 在单独的文件 worker.ts 中定义：

self.onmessage = async (e) => {
  if (e && e.data && e.data.msg === "formatData") {
    const { sortedSeries, theme, range } = e.data;
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const data = useFormatData(sortedSeries, theme, range);
    self.postMessage(data);
  }
};

function useFormatData(series, theme, range) {
  return useMemo(() => {
   // do stuff
    };
  }, [range, sortedSeries, theme]);
}

工作人员使页面崩溃并出现以下错误：

未捕获的 DOMException: 无法在 'Worker: function (number) { var b = number % 10, output = toInt((number...... } 无法克隆。

如何解决这个问题？

标签： reactjsweb-worker

解决方案

我最近在将一个对象传递给包含我不知道的函数的 web worker 时看到了这个问题。

series从您的错误的外观来看，在,theme或range传递给工作人员方面也可能是您的情况。

这个 SO Answer中解释了替代方案的一个很好的解释。总而言之，它提到只将可序列化的数据传递给工作者，然后在 webworker 端添加回函数（如果需要）。

推荐阅读