Axios Unhandled Rejection (Typeerror): Cannot Read Property 'data' of Undefined

Discussion on: Undefined Nested Object in REST API with React Hooks?

Replies for: You should have 3 outputs. Is that undefined, undefined, undefined? Can we get the total lawmaking?

mitchelln11

• Jun 4 '20

Unhandled Rejection (TypeError): Cannot read belongings '0' of undefined. Breaks the folio, doesn't even log anything.

Can we meet the code please? Information technology could be a number of things.

mitchelln11

• Jun 5 '20

It is in React and uses hooks.

                        import React, { useState, useEffect } from 'react'; import axios from 'axios';  const LocalWeather = () => {     const [openWeather, setWeather] = useState([]);      useEffect(() => {         axiosGet();     }, []); //  Run once on load      const axiosGet = () => {         const data = axios.get(`https://api.openweathermap.org/data/ii.v/weather condition?q=London,great britain&APPID=${process.env.REACT_APP_WEATHER_KEY}`)         .so(data => setWeather(data.data));     console.log(openWeather, openWeather.weather condition, openWeather.conditions[0]);     }      return (         <ul>             <li>{openWeather.proper noun}</li>             <li>{openWeather.cod}</li>             <li>{openWeather.id}</li>             <li>{openWeather.timezone}</li>             <li>{openWeather.dt}</li>             <li>{openWeather.visibility}</li>             <li>{openWeather.base}</li>             {/* <li>{openWeather.current.atmospheric condition[0].master}</li> */}         </ul>     ); }  export default LocalWeather;

The panel.log in the axiosGet method is breaking the page.

Thank you!
Let'south change the panel.log(openWeather, openWeather.atmospheric condition, openWeather.weather[0]); to be inside the then callback:

                        const axiosGet = () => {       const data = axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${procedure.env.REACT_APP_WEATHER_KEY}`)       .then(data => {         setWeather(data.information);         console.log('Service data was', data.data);       });   }

That volition give y'all an idea of what'south really stored in openWeather.

On the other hand, you got a current in the failing line. .current is used for react ref simply not for land. Attempt removing that.

Good luck!

mitchelln11

• Jun v '20

Become the following:

                            Service data was Array(0)length: 0__proto__: Assortment(0)

I also removed the electric current. Thanks, I forgot I had that in there.

Seem similar you get an empty array. Maybe yous are getting an unexpected response, check chrome network console developers.google.com/web/tools/ch...
Maybe y'all don't demand to data.information and but data. Keep console logging =)

mitchelln11

• Jun v '20

And then somebody on a Slack channel figured this out for me.

When returning JSX:

                                <li>{openWeather.weather && openWeather.weather[0].main}</li>

This feels like a problems to me, but information technology does output the response from the REST API.

I am still getting a alarm, which I am unsure why:

                                                                  const axiosGet = () => {         const information = axios.go(`https://api.openweathermap.org/information/two.v/weather?q=London,united kingdom&APPID=api-key`)         .so(information => setWeather(data.data));     }

It'south saying Line 14:15: 'data' is assigned a value just never used no-unused-vars, although everything works. Aren't I setting the rest endpoint to data, and then using information technology when running the setWeather method?

Great that you figure it out!

Keep in mind that yous get a commencement render earlier y'all go the data with openWeather as the default value passed in useState.

Maybe you can:

                                                                  const                                  LocalWeather                                  =                                  ()                                  =>                                  {                                  const                                  [                                  openWeather                                  ,                                  setWeather                                  ]                                  =                                  useState                                  (                                  null                                  );                                  // null obj instead of empty array                                  useEffect                                  (()                                  =>                                  {                                  axiosGet                                  ();                                  },                                  []);                                  //  Run one time on load                                  const                                  axiosGet                                  =                                  ()                                  =>                                  {                                  axios                                  .                                  get                                  (                                  `https://api.openweathermap.org/data/ii.5/weather?q=London,united kingdom of great britain and northern ireland&APPID=                                  ${                                  procedure                                  .                                  env                                  .                                  REACT_APP_WEATHER_KEY                                  }                                  `                                  )                                  .                                  then                                  (                                  data                                  =>                                  setWeather                                  (                                  information                                  .                                  data                                  ));                                  }                                  if                                  (                                  !                                  openWeather                                  )                                  return                                  null                                  ;                                  // empty render until nosotros get data                                  // if nosotros get here we do have openWeather                                  render                                  (                                  <                                  ul                                  >                                  <                                  li                                  >                                  {                                  openWeather                                  .                                  name                                  }                                  <                                  /li                                  >                                                                    <                                  li                                  >                                  {                                  openWeather                                  .                                  cod                                  }                                  <                                  /li                                  >                                                                    <                                  li                                  >                                  {                                  openWeather                                  .                                  id                                  }                                  <                                  /li                                  >                                                                    <                                  li                                  >                                  {                                  openWeather                                  .                                  timezone                                  }                                  <                                  /li                                  >                                                                    <                                  li                                  >                                  {                                  openWeather                                  .                                  dt                                  }                                  <                                  /li                                  >                                                                    <                                  li                                  >                                  {                                  openWeather                                  .                                  visibility                                  }                                  <                                  /li                                  >                                                                    <                                  li                                  >                                  {                                  openWeather                                  .                                  base                                  }                                  <                                  /li                                  >                                                                    {                                  openWeather                                  .                                  weather                                  .                                  map                                  (                                  item                                  =>                                  <                                  li                                  fundamental                                  =                                  {                                  item                                  .                                  master                                  }                                  >                                  {                                  detail                                  .                                  main                                  }                                  <                                  /li                                  >                                                                    )}                                  <                                  /ul                                  >                                                                    );                                  }

no-unused-vars is because yous are doing const data = and never utilize that data const. Non to exist confused with the so data argument. Note I removed information technology in my case

mitchelln11

• Jun 5 'xx

Sweetness, works perfectly, i idea that data was the same thing as in the and then statement. Works, no errors! Give thanks yous so much for your help

Glad to read that! Go on upward the good work!

Gustavo Zapata

• Sep 14 'twenty

I simply spent hours trying to figure out what the upshot was. Thanks to y'all guys (mitchelln11 and Diego Sisto) I was able to set up information technology.
My ii cents:
Instead of if(!openWeather) return zip;
I used {!openWeather && openWeather.weather.map(...) which will render the rest of the app and just ignoring this line.

perezelifuldn.blogspot.com

Source: https://dev.to/mitchelln11/comment/100kc

Axios Unhandled Rejection (Typeerror): Cannot Read Property 'data' of Undefined

Discussion on: Undefined Nested Object in REST API with React Hooks?

Replies for: You should have 3 outputs. Is that undefined, undefined, undefined? Can we get the total lawmaking?

0 Response to "Axios Unhandled Rejection (Typeerror): Cannot Read Property 'data' of Undefined"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel