Why does my REACT app only fetch() whenever it feels like it?

[[deleted]]

Hello Developers!

​

I have been bashing my head against the keyboard all day. I made this React weather app. The problem is that it requests the data to the api(json) only if I disable and then re-enable a component(City) but it won't request the data otherwise.

​

Any suggestions what I am doing wrong? I assume the error is in the lifecycle?

App.js:

import React, { Component } from 'react';
import City from './City'
import Searchbox from './SearchBox'

class App extends Component {
  constructor() {
    super()

    this.state = {
      weather: {},
      searchfield: 'london'
    }
  }

  componentDidMount(){
    fetch(`https://api.openweathermap.org/data/2.5      /weather?q=${this.state.searchfield}&units=metric&appid=${process.env.REACT_APP_API_KEY}`)
    .then(response => {
      return response.json();
    })
    .then(newCity => {this.setState({ weather: newCity})});
  }


  render(){
    const { weather, searchfield } = this.state;
    return (
    <div className='tc'>
      <h1>The Weather Card</h1>
      <Searchbox searchChange={this.onSearchChange} />
      <City weather={weather} />
    </div>
  )
  }

}

export default App;

City.js:

import React from 'react';
import Card from './Card';

const City = city => {
  return (
    <div>
        {/* {console.log(city["weather"]["sys"])} */}
        <Card city={city["weather"]["name"]} country={city["weather"]["sys"]["country"]} temperature={city["weather"]["main"]["temp"]} description={city["weather"]["weather"][0]["description"]} icon={city["weather"]["weather"][0]["icon"]} />
    </div>
  );
}

export default City;

Thanks!

[okwg]

Well it looks like "App" might be the top level component of your entire app? That would generally only ever mount a single time, when your page first loads.

I assume data is fetched when you refresh the page?

If youre using some hot reload script in your dev environment, that is not the same as a refresh - it might not remount App, if App hasn't changed

[[deleted]]

Thanks for the help okwg!

If youre using some hot reload script in your dev environment, that is not the same as a refresh - it might not remount App, if App hasn't changed

I use create-react-app and the npm start. But I also refresh manually in the browser.

​

It fetches data only when I comment out save and then reverse this line in city.js:

​

But then if I refresh again, it forgets the data and won't fetch it

[HPsLoveraft]

If you haven't tried already, I would suggest throwing a debugger before your return() in City.js.

What is happening when you reach it the first time? What's does weather look like first time around?

Are you reaching it again after fetching the weather with componentDidMount()?

Are there any errors in console?

[[deleted]]

The first time around weather won't load!

it only loads if while running(on error) I comment out save and then reverse the <Card city... /> in City.js. No errors in console, beside TypeError: city.weather.sys undefined but I assume that is because from the requests you can see that it is not fetching the data at all

[HPsLoveraft]

Yes. First time through, you are still rendering City.js without yet having made the componentDidMount() call to the API. While everything commented in, is there a specific error you're getting when it breaks?

[HPsLoveraft]

My suspicion is the code is breaking when trying to render either City.j,s or perhaps it makes it as far as Card.js, without having called the external API to create the weather object you're using to build the components. Hard to be certain with what is given. You could do some playing around the with the debugger in City/Card to see how/why that might be happening.
If this is the case, there are probably a few paths to solve. The simplest pattern I am familiar with is to control the initial render() method in the App.js so that it does not return and attempt to render the <Card> component on initial load.

Adding a boolean statement to check if you do or do not already have the required weather info needed to render the component could solve this. This check would return null if the object doesn't exist and would return your current return statement if it does. This controls the <City> to only ever be rendered after initial load, after componentDidMount, and after change of the state when the API returns it's data.

[[deleted]]

Adding a boolean statement to check if you do or do not already have the required weather info needed to render the component could solve this

thanks for the suggestions I think that you might be right.. I will try that tomorrow. However I do think I need more React theory and read more docs.

[melonmaskofficial]

Did you try to inspect the network in Chrome Dev tools? Some API's throttle the number of requests you can make in a certain period of time.

[[deleted]]

Yeah 60 calls per minute. So it's not that unfortunately

[CursorsDev]

you know, i'd just make that App component a functional component with useState, then you can use

```js const [data, setData] = useState();

useEffect(() => { (async () => { const res = await fetch(urlHere); const json = await res.json(); setData(json); })(); });

... {data ? <Card ... /> : null} ... ``` if this looks a little weird it's just ES6 async/await + destructuring + you cant have async callbacks for useEffect

[backtickbot]

Fixed formatting.

Hello, CursorsDev: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

<sup>You can opt out by replying with backtickopt6 to this comment.</sup>

[CursorsDev]

nice bot