TypeError: Cannot read property 'get' of undefined with useEffect and Axios

Question

I'm trying to fetch some data inside a React hook. Nothing fancy here, just some loading text and then replace once my data loads.

But I keep hitting my catch block and get Failed to fetch data: Cannot read property 'get' of undefined TypeError: Cannot read property 'get' of undefined printed to the console.

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

const DataPanel = () => {
  let [isLoading, setLoading] = useState(false);
  let [data, setData] = useState();

  useEffect(() => {
    async function getData() {
      let response;
      setLoading(true);
      try {
        response = await axios.get("urltosomewhere");
        setData(response);
      } catch (e) {
        console.log(`Failed to fetch data: ${e.message}`, e);
        return;
      } finally {
        setLoading(false);
      }
    }

    getData();
  });

  return (
    <div>
      <div>{isLoading ? <span>Loading...</span> : <span>{data}</span>} </div>
    </div>
  );
};

export default DataPanel;

You probably want `import axios from 'axios'` – Sid Vishnoi May 07 '20 at 16:50 — Sid Vishnoi, May 07 '20 at 16:50

score 10 · Accepted Answer · answered May 07 '20 at 16:50

10

You need to import axios from 'axios', not import { axios } from 'axios'.

This is because the axios module default exports the axios class. It's not a named export so it can't be imported using the method you tried.

answered May 07 '20 at 16:50

Barry Michael Doyle

9,333
30
83
143

Yeesh...I'm blind sometimes. Thanks for that – Devon Deason May 07 '20 at 16:54
No worries :) Happens to the best of us :) – Barry Michael Doyle May 07 '20 at 16:59

TypeError: Cannot read property 'get' of undefined with useEffect and Axios

1 Answers1