Using JS native fetch() api in React ComponentDidMount() results in a pending Promise

Question

I was trying to load data into my project from the public folder in the componentDidMount() lifecycle method. However, I didn't get the desired FeatureCollection Object but a pending Promise.

componentDidMount = () => {

    ...

    const data = fetch(`vcd/${this.state.monthFile}`)
        .then(response => response.text())
        .then(async data => {
            return csv2geojson.csv2geojson(data, {
                latfield: 'lat',
                lonfield: 'lng',
                delimiter: ','
            }, (err, data) => {
                if (err) console.log(err);
                console.log(data); // correctly outputs a FeatureCollection, length 30277
                return data;
                // this.setState({ someAttribute: data }) => Also doesn't work.
            })
        })
        .then(data => data); // If to use another Promise chaining, the result would be undefined.

    console.log(data); // a pending Promise

}

My file contains 30277 rows * 3 columns, ~500Kb in size, which I think shouldn't be a problem with data loading, and after consulting the csv2geojson and fetch API, I still can't think of a solution to this problem. I am grateful for any helpful inputs.

EDIT: Using both async-await pattern and chaining another .then would result in undefined.

Why doesn't this.setState({ someAttribute: data }) work in the promise chain? — Drew Reese
– Drew Reese, Commented Aug 21, 2020 at 8:28

Closery · Accepted Answer · 2020-08-21 08:40:52Z

JS Fetch returns a promise so its because you're returning that promise. So just change your code like this it will work;

import React, { useEffect, useState } from "react";

export default function ExampleHooks() {
  const [data, setData] = useState(null);
  var csv2geojson = require("csv2geojson");

  useEffect(() => {
    fetch("https://gw3xz.csb.app/sample.csv")
      .then((response) => response.text())
      .then(async (data) => {
        csv2geojson.csv2geojson(
          data,
          {
            latfield: "lat",
            lonfield: "lng",
            delimiter: ","
          },
          (err, data) => {
            if (err) console.log(err);
            setData(data);
          }
        );
      });
  }, []);

  return <div onClick={() => console.log(data)}>show data</div>;
}

or as a Class Component:

import React from "react";
var csv2geojson = require("csv2geojson");

class ExampleClass extends React.Component {
  state = {
    data: null
  };

  componentDidMount() {
    fetch(`vcd/${this.state.monthFile}`)
      .then((response) => response.text())
      .then(async (data) => {
        csv2geojson.csv2geojson(
          data,
          {
            latfield: "lat",
            lonfield: "lng",
            delimiter: ","
          },
          (err, data) => {
            if (err) console.log(err);
            this.setState({ data: data });
          }
        );
      });
  }

  render() {
    return <div onClick={() => console.log(this.state.data)}>show data</div>;
  }
}

export default ExampleClass;

Working example over here

Drew Reese · Accepted Answer · 2020-08-21 09:08:32Z

1

fetch returns a promise, and that is what you save to data. If you want to log the "data", then you have a couple options.

Log it IN the promise chain (you already do that)
Convert over to async/await and await the fetch to resolve/reject

code

componentDidMount = async () => {

    ...

    const data = await fetch(`vcd/${this.state.monthFile}`)
        .then(response => response.text())
        .then(data => {
            return csv2geojson.csv2geojson(data, {
                latfield: 'lat',
                lonfield: 'lng',
                delimiter: ','
            }, (err, data) => {
                if (err) console.log(err);
                console.log(data);
                return data;
            })
        });

    console.log(data); // a resolved/rejected Promise result
}

edited Aug 21, 2020 at 9:08

answered Aug 21, 2020 at 8:29

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

2 Comments

Z.Richard Over a year ago

Thanks for the input! I have tried your method above, but the data results in undefined. I have also tried to chain another .then(), and the same result is yielded, i.e. undefined.

Drew Reese Over a year ago

@Z.Richard I'm not sure what you may be doing differently, but for my own sanity I tested out both solutions in a codesandbox and this works. Updated answer to include link to sandbox demo.

Collectives™ on Stack Overflow

Using JS native fetch() api in React ComponentDidMount() results in a pending Promise

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related