React API call don't change state

Question

I am trying to create React weather app. In this app you can type name of the city and it shows the currently temperature. But after caloing API my state dont want to change to other city object (in coponentDidMount method - "obje" state).

import React, { Component } from 'react';
import Api from './api.js';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      obje: {},
      inputValue: 'Paris'
    }
  }
  componentDidMount() {
    var rootUrl = "http://api.openweathermap.org/data/2.5/weather?q=";
    var city = this.state.inputValue
    var key = "&appid=aa32ecd15ac774a079352bfb8586336a";
      fetch(rootUrl + city + key)
        .then(function(response) {
            return response.json();
        }).then(d => {
          this.setState({obje:d})
        });

  }

  handleChange(event) {
    event.preventDefault();

    this.setState({inputValue: this.refs.inputVal.value});
    console.log(this.refs.inputVal.value);
  }
  render() {
    return (
      <div>
       {this.state.obje.name}
       <form action="" method="" onSubmit={this.handleChange.bind(this)}>
      <input ref="inputVal" type="text" />
      <input type="submit" />
    </form>
      </div>
    );
  }
}

export default App;

are there any errors in console?

Oleksii Dubeniuk
– Oleksii Dubeniuk

2017-07-25 17:34:06 +00:00
Commented Jul 25, 2017 at 17:34 — Oleksii Dubeniuk
– Oleksii Dubeniuk, Commented Jul 25, 2017 at 17:34
no errors occurs

Mac
– Mac

2017-07-25 17:37:31 +00:00
Commented Jul 25, 2017 at 17:37 — Mac
– Mac, Commented Jul 25, 2017 at 17:37

Rob M. · Accepted Answer · 2017-07-25 17:53:11Z

1

componentDidMount is only called once - when the component mounts. A state change will not trigger that code again, therefore the XHR request will not be made again. Split out the XHR logic to its own method and call it in both places, for example:

import React, { Component } from 'react';
import Api from './api.js';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      obje: {},
      inputValue: 'Paris'
    }
  }
  getWeather() {
      var rootUrl = "http://api.openweathermap.org/data/2.5/weather?q=";
      var city = this.state.inputValue;
      var key = "&appid=aa32ecd15ac774a079352bfb8586336a";
        fetch(rootUrl + city + key)
          .then(function(response) {
              return response.json();
          }).then(d => {
            this.setState({obje:d})
          });
  }
  componentDidMount() {
     this.getWeather();
  }

  handleChange(event) {
    event.preventDefault();

    this.setState({inputValue: this.refs.inputVal.value}, () => {
        this.getWeather();
    });
    console.log(this.refs.inputVal.value);
  }
  render() {
    return (
      <div>
       {this.state.obje.name}
       <form action="" method="" onSubmit={this.handleChange.bind(this)}>
      <input ref="inputVal" type="text" />
      <input type="submit" />
    </form>
      </div>
    );
  }
}

export default App;

answered Jul 25, 2017 at 17:53

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mac Over a year ago

Your idea dont solve my problem. Its the same effect :(

Rob M. Over a year ago

I didn't test my code, but assuming that your goal is to make an API call when the user clicks submit - this or some variation of this is the solution. Did you check the console and make sure the new value is being logged? Are there errors? Did you try logging from getWeather() to ensure that it is being called correctly?

Mac Over a year ago

I think the problem is with variable "city" beacuse function getWeather is triggered only once, so this variable can't change. HM.....

Collectives™ on Stack Overflow

React API call don't change state

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related