为什么我不在钩子的 useEffect 中创建 object？

Question

我正在尝试在我们的演示应用程序中使用webworker ，但我无法创建我的worker实例。 我得到错误工作者是只读的。 为什么？

这是我的代码

https://codesandbox.io/s/bold-forest-s3guc?file=/src/App.js

import React, { useEffect } from "react";
import "./styles.css";
import worker from "./workerfile";
import WebWorker from "./setup";
export default function App() {
  const buttonHan = () => {
    alert("==g=");
  };

  useEffect(() => {
    // worker = new WebWorker(worker);
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={buttonHan}>BTN</button>

      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

iissue 是当我在下一行的useEffect中创建一个 object 的工人时。

 // worker = new WebWorker(worker);

单击按钮时，我想将trigger发送给我的工作人员进行计算。

Answer 1

const value worker是默认导出，因此是只读的。 我假设您想使用worker程序 object 来创建 WebWorker。

只需删除将创建的 WebWorker 存储在 worker 常量变量中的部分。

import React, { useEffect } from "react";
import "./styles.css";
import worker from "./workerfile";
import WebWorker from "./setup";
export default function App() {
  const buttonHan = () => {
    alert("==g=");
  };

  useEffect(() => {
    new WebWorker(worker);
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={buttonHan}>BTN</button>

      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Answer 2

你有两条线是冲突的。

import worker from "./workerfile";

和

    // worker = new WebWorker(worker);

您首先从文件导入并将值分配给名为worker的变量。

您以后不应更改该值。 如果您必须使用该名称，您可以通过包含块作用域关键字（例如let或const ）来对变量进行影子作用域。 但您也可以只重新定义变量名称（例如myWorker或类似名称）。