0

In a React app, I'm trying to load a JavaScript function from another script, pass it some information and have it process it and return the result. It is currently not working because the processing happens on a worker thread, and it seems like the result is being used before the worker finishes, giving a undefined value in my app.

Inside the function, I have some console.logs that show that the result is successfully obtained. It's just not being passed back to the script. It's being ignored.

How can I get the result to show up in App.js?

I have replicated this problem in a sandbox here.

The console.log statements:

(addressParser) creating layer: addresses 
(createLayers) addresses: undefined 
(addressParser) done creating layer: addresses 
(addressParser) addresses: [object Object]

app.js:

import "./styles.css";
import layers from "./createLayers.js";

export default function App() {
  return (
    <div className="App" layers={layers}>
      {Object.entries(layers).map(([name, layer]) => {
        return (
          <div>
            <span>Name: {name}</span>
            <br />
            <span>Data: {name.data ? "success": "failed"}</span>
          </div>
        );
      })}
    </div>
  );
}

createLayers.js:

import Data from "./metadata.json";
import load from "./addressParser.js";

var layers = {};
createLayers();

function createLayers() {
  Object.keys(Data).forEach(function (name) {
    layers[name] = load(name, Data[name]);
    console.log("(createLayers) addresses: " + layers[name]);
  });
}

export default layers;

addressParser.js:

import { readRemoteFile } from "react-papaparse";

function load(name, metadata) {
  console.log("(addressParser) creating layer: " + name);

  readRemoteFile(metadata.url, {
    header: true,
    worker: true,
    complete: (results) => {
      /* header: true makes it into an array of objects */
      if (!results) {
        console.log("COULD NOT CREATE LAYER: " + name);
        return;
      }

      var layer = { ...metadata, data: results };

      console.log("(addressParser) done creating layer: " + name);
      console.log("(addressParser) addresses: " + results);
      return layer;
    }
  });
}

export default load;

metadata.json:

{
  "addresses": {
    "url": "https://raw.githubusercontent.com/FBosler/Medium-Data-Extraction/master/sales_team.csv"
  }
}

One dependency: react-papaparse.

brienna
  • 1,415
  • 1
  • 18
  • 45
  • 1. You don't return anything from your load function. 2. It seems to be asynchronous anyways. – Jared Smith Mar 07 '21 at 18:08
  • Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Jared Smith Mar 07 '21 at 18:09
  • There's a `return layer;` statement. – brienna Mar 07 '21 at 18:09
  • Yes, in a callback, not the load function. You don't return anything from the outer `load` function, so the return value defaults to `undefined`. – Jared Smith Mar 07 '21 at 18:09
  • Should I be returning a value or callback from the outer `load` function? – brienna Mar 07 '21 at 18:11
  • You probably want to return a Promise that is resolved in the callback, see the answers on the linked duplicate for more detail. – Jared Smith Mar 07 '21 at 18:24

0 Answers0