React API呼び出しは状態を変更しません。

Question

React weather appを作成しようとしています。このアプリでは都市名を入力することができ、現在の気温を表示します。 しかし、私の状態は他の都市オブジェクト（coponentDidMountメソッド - "obje"状態）に変更したくありません。

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; 

Answer 1

componentDidMountは、コンポーネントがマウントされたときに1回だけ呼び出されます。状態の変更によってそのコードは再びトリガされないため、XHR要求は再び行われません。 XHRロジックを独自のメソッドに分割し、両方の場所で呼び出します。

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;