网络工作者问题：未捕获的DOMException：无法在“工作者”上执行“ postMessage”

如何解决网络工作者问题：未捕获的DOMException：无法在“工作者”上执行“ postMessage”

我在React应用程序中有一个用chartjs制作的条形图。虽然效果很好，但是可以由Web Worker处理数据解析，从而加快页面加载速度。

我已经在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,range } = e.data;
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const data = useFormatData(sortedSeries,range);
    self.postMessage(data);
  }
};

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

工作程序使页面崩溃，并显示以下错误：

未捕获的DOMException：无法在'Worker：function（number）{上执行'postMessage'{ var b =数字％10， 输出= toInt（（number ......}无法克隆。

该如何解决？

解决方法

我最近在将对象传递给包含未知功能的Web Worker时遇到了这个问题。

从错误的外观来看，将series，theme或range传递给工作人员也是如此。

在this SO Answer中对替代方法有很好的解释。总而言之，它提到仅将可序列化的数据传递给工作程序，然后在Webworker端重新添加功能（如有必要）。