When I update my state from form in react, my data in child components, gets strange behavior

Question

I have simply react weather app where I select a city from and after it, I need to reload the data. Basically, it's working fine. But after the change of the city, my child components shows new data, old data, and repeat it a few times, and after it, components show good data. What's wrong?

I try to implement some functions from component lifecycle methods, but it didn't work.

import React, { Component } from 'react';
import './App.css';

import Form from "./Components/Form"
import Overcast from "./Components/Overcast"
import Forecast from "./Components/Forecast"

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

    this.state = {
      forecasts: [{}],
      selectedCity: 1
    }

    this.handleCityChange = this.handleCityChange.bind(this)
    this.fetchForeacst = this.fetchForeacst.bind(this)
  }

  componentDidMount() {
    var today = new Date()
    var day = String(today.getDate()).padStart(2, '0')
    var month = String(today.getMonth() + 1).padStart(2, '0')
    var year = String(today.getFullYear())

    today = year + '-' + month + '-' + day

    this.fetchForeacst(today)
  }

  componentDidUpdate() {
    var today = new Date()
    var day = String(today.getDate()).padStart(2, '0')
    var month = String(today.getMonth() + 1).padStart(2, '0')
    var year = String(today.getFullYear())

    today = year + '-' + month + '-' + day

    this.fetchForeacst(today)
  }

  fetchForeacst(date) {
    const WEATHER_API = 'http://dev-weather-api.azurewebsites.net/api/city/' + this.state.selectedCity + '/weather?date=' + date + ''
    fetch(WEATHER_API)
      .then(response => response.json())
      .then(data => this.setState({forecasts: data}))
  }

  handleCityChange(city) {
    this.setState({selectedCity: city})

  }

  render() {
    return (
      <div className="App">
        <Form handleChange={this.handleCityChange}/>
        <Overcast forecast={this.state.forecasts[0]} />
        <Forecast forecasts={this.state.forecasts} />
      </div>
    )
  }
}

export default App;

I don't have any errors or something.

Answer 1

You call the fetch api on didUpdate, which triggers a setState, which calls didUpdate again and again. That's why you see the loop. You should wrap the fetch in an if statement like this:

 componentDidUpdate(prevProps, prevState) {
    if(prevState.selectedCity !== this.state.selectedCity) {
        var today = new Date()
        var day = String(today.getDate()).padStart(2, '0')
        var month = String(today.getMonth() + 1).padStart(2, '0')
        var year = String(today.getFullYear())

        today = year + '-' + month + '-' + day

        this.fetchForeacst(today)      
     }
}

Hope this helps. Happy coding.