React API調用不會更改狀態

Question

我正在嘗試創建React天氣應用程序。在這個應用程序，你可以鍵入城市的名稱，它顯示當前的溫度。 但caloing API後，我的狀態不想更改爲其他城市對象（在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只被調用一次 - 組件掛載時。狀態更改不會再次觸發該代碼，因此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;