javascript - 在代码沙箱中使用 npm 包对 Web Worker 使用react

Question

• 我正在尝试在我的应用中实现 React Web Worker。
• 所以我做了一个研究，发现了这个包 https://www.npmjs.com/package/react-webworker .
• 我将得到数千个数字，我需要拼接一个数字，然后将其传递给 api。
• 因为会有更多数据。
• 我决定使用 Web Worker。
• 但是当我包含代码网络工作人员结果时，我没有得到。
• 你能告诉我如何让网络 worker 在我的沙箱中工作吗？
• 在下面提供我的代码片段和沙箱。

https://codesandbox.io/s/redux-async-actions-y5ho5

<DataList
        doFetch={store.getState().fetched}
        data={store.getState().data}
      />

      <MyComponent />


const MyComponent = () => (
  <WebWorker url="/worker.js">
    let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,

  19, 20, 21,
];
let result= [];

let plantsSearchData = numbers.map(search => {
 // console.log("numbers---->", search);
  if (search.length > 1) {
            result.push(search);
  }

   console.log("pushed numbers---->", result);

});




    const response = await axios.get( "https://reqres.in/api/users?page=2"
    );
    {({ data, error, postMessage, updatedAt, lastPostAt }) => (
      <div>
        {data && (
          <div>
            <strong>Received some data:</strong>
            <pre>{JSON.stringify(data, null, 2)}</pre>
          </div>
        )}
        <button
          onClick={() => postMessage("hello")}
          disabled={updatedAt < lastPostAt}
        >
          {updatedAt < lastPostAt ? "Loading..." : "Go"}
        </button>
      </div>
    )}
  </WebWorker>
);

Answer 1

在 main.js 文件中导入 web-worker并在你的 componentDidMount() 生命周期中创建一个 webworker 实例

使用此链接获取更多信息 web workers on react