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

Question

我正在尝试在我们的演示应用程序中使用 webworker，但我无法创建 worker 的实例。我得到错误 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>
  );
}

问题是当我在下面的行 useEffect 中创建一个 worker 对象时。

 // worker = new WebWorker(worker);

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

Answer 1

const 值 worker 是默认导出，因此是只读的。我假设您想使用 worker 对象来创建 WebWorker。

只需删除您在工作程序常量变量中存储创建的 WebWorker 的部分。

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 或类似名称）。

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

why I am not create object in useEffect in hooks?

javascript

reactjs

react-redux

web-worker