在代码沙箱中使用 npm 包对 web worker 做出反应答案

【问题标题】：react web worker using npm package in code sandbox在代码沙箱中使用 npm 包对 web worker 做出反应
【发布时间】：2019-08-07 16:04:24
【问题描述】：

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

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>
);

【问题讨论】：

标签： javascript html reactjs redux web-worker

【解决方案1】：

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

使用此链接了解更多信息web workers on react

【讨论】：

嘿，能不能在我的codesandbox里更新，好混乱