React - get data with axios

Question

In my react app that is based on class components, My response API got from open weather fixes after several lags. this is my state

class Weather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      weatherData: undefined,
      weatherDescription: undefined,
    };
  }

My thinking was that when my componentDidMount, weather API getting from openWeather and set it in state

  componentDidMount() {
    axios
      .get(
        `http://api.openweathermap.org/data/2.5/weather?id=someCityId&units=metric&appid=myApiKey`
      )
      .then((response) => {
        if (response.request.status === 200) {
            this.setState({
              weatherData: response.data.main.temp,
              weatherDescription: response.data.weather[0].description,
              weatherTextDisplay: this.state.airConditionsText.filter((item)=>{
                return item["id"] === response.data.weather[0].id
              })
            });
        }else{throw Error('No internet')}
      })
      .catch(error => Error.message)

and I want to update data when the city is changing, in componentDidUpdate the data get again from the openWeather

componentDidUpdate() {
    axios
      .get(
        `http://api.openweathermap.org/data/2.5/weather?id=someCityId&units=metric&appid=myApiKey`
      )
      .then((response) => {
        if (response.request.status === 200) {
            this.setState({
              weatherData: response.data.main.temp,
              weatherDescription: response.data.weather[0].description,
              weatherTextDisplay: this.state.airConditionsText.filter((item)=>{
                return item["id"] === response.data.weather[0].id
              })
            });
        }else{throw Error('No internet')}
      })
      .catch(error => Error.message)

  }

But the problem is that when my response receives, it faces a lag that causes data jumps several times to previous data and new data until it fixes

I at least want to display loading text until my response completely get — hossein fti, Nov 26 '21 at 08:48
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Nov 30 '21 at 23:16

score 0 · Answer 1 · edited May 02 '22 at 06:20

I do not completely understand the question, but this 'lags' because the action of fetching something from an external source is async and needs time to complete.

As for the second 'part' of displaying the loading text you have to set a variable (preferably in state which indicates the loading state of this component)

eg.

 constructor(props) {
    super(props);
    this.state = {
       loading: false,
       airConditionsText: null,
       // Other stuff you have in state
    };
  }

  componentDidUpdate() {
    this.setState({loading: true}) // Start of loading
    axios
      .get(
        `http://api.openweathermap.org/data/2.5/weather?id=${this.state.inputId}&units=metric&appid=myApiKey`
      )
      .then((response) => {
        if (response.request.status === 200) {
            this.setState({
              weatherData: response.data.main.temp,
              weatherDescription: response.data.weather[0].description,
              weatherTextDisplay: this.state.airConditionsText.filter((item)=>{
                return item["id"] === response.data.weather[0].id
              })
            });
        }else{throw Error('No internet')}
      })
      .catch(error => Error.message)
      .finally(() => this.setState({loading: false})) // End of loading

.finally is being trigger once the async operation (fetching the data from weatherAPI) finishes with either error or success which is the time to stop loading.

Then you can use this.state.loading in component render to show loading text eg.

  render() {
    return (
        <div>
          {this.state.loading 
            ? <div> Loading... </div> 
            : <div>{this.state.airConditionsText}</div> // other stuff you want to display
          } 
        </div>
    );
  }

My main problem is that lag and it causes my data loads after several jumps, you are right, I try to get a response from [openWeather](https://openweathermap.org/) to show the weather temperature on my page, But it seems to need time to complete, so **how can I handle that lag**? — hossein fti, Nov 27 '21 at 12:22
I wrote in my bottom example.. Based on the loading state you can display your own loading animation instead of `
loading...
` — CoderNameIsMartin, Nov 30 '21 at 09:16

React - get data with axios

1 Answers1