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

【问题标题】：Web-worker issue: Uncaught DOMException: Failed to execute 'postMessage' on 'WorkerWeb-worker 问题：未捕获的 DOMException：无法在“Worker”上执行“postMessage”
【发布时间】：2021-01-05 04:50:55
【问题描述】：

我在 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, 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]);
}

worker 导致页面崩溃并出现以下错误：

未捕获的 DOMException: 无法在 'Worker: function (number) { 上执行 'postMessage' var b = 数字 % 10, 输出 = toInt((number...... } 无法克隆。

如何解决这个问题？

【问题讨论】：

标签： reactjs web-worker

【解决方案1】：

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

根据您的错误，您也可能遇到series、theme 或range 被传递给工作人员的情况。

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

【讨论】：