Javascript React-API调用don'；不改变状态

我正在尝试创建React天气应用程序。在这个应用程序中，你可以输入城市的名称，它会显示当前的温度。 但是在调用API之后，我的状态不想更改为其他城市对象（在coponentdimount方法中为“obje”状态）

import React，{Component}来自'React'；
从“/Api.js”导入Api；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
obje:{}，
输入值：“巴黎”
}
}
componentDidMount（）{
var rootUrl=”http://api.openweathermap.org/data/2.5/weather?q=";
var city=this.state.inputValue
var key=“&appid=aa32ecd15ac774a079352bfb8586336a”；
获取（rootUrl+city+key）
.然后（功能（响应）{
返回response.json（）；
}).然后（d=>{
this.setState（{obje:d}）
});
}
手变（活动）{
event.preventDefault（）；
this.setState（{inputValue:this.refs.inputVal.value}）；
log（this.refs.inputVal.value）；
}
render（）{
返回(
{this.state.obje.name}
);
}
}
导出默认应用程序；

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;

import React，{Component}来自'React'；
从“/Api.js”导入Api；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
obje:{}，
输入值：“巴黎”
}
}
getWeather（）{
var rootUrl=”http://api.openweathermap.org/data/2.5/weather?q=";
var city=this.state.inputValue；
var key=“&appid=aa32ecd15ac774a079352bfb8586336a”；
获取（rootUrl+city+key）
.然后（功能（响应）{
返回response.json（）；
}).然后（d=>{
this.setState（{obje:d}）
});
}
componentDidMount（）{
这个。getWeather（）；
}
手变（活动）{
event.preventDefault（）；
this.setState（{inputValue:this.refs.inputVal.value}，（）=>{
这个。getWeather（）；
});
log（this.refs.inputVal.value）；
}
render（）{
返回(
{this.state.obje.name}
);
}
}
导出默认应用程序；

控制台中是否有错误？没有错误发生您的想法无法解决我的问题。其效果是一样的：（我没有测试我的代码，但假设您的目标是在用户单击submit时进行API调用-这就是解决方案。您是否检查了控制台并确保记录了新值？是否有错误？是否尝试从

getWeather（）进行日志记录

为了确保正确调用它？我认为问题出在变量“city”上，因为函数getWeather只触发一次，所以这个变量不能更改。嗯。。。。。

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;