React class 组件状态值未更新

Question

我是 React js 的新手。我正在通过创建一个简单的应用程序来学习它。我尝试使用 React class 组件创建一个简单的天气应用程序。一切正常，但存储在状态变量中的结果未打印在模板中。我可以在控制台中看到 API 响应，然后将结果存储在模板中未显示的 'currWeatherRes' 状态变量中（位置始终为空白）

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  
  constructor(){
    super();

    this.state = {
        cityName: "",
        currWeatherRes: {}
    }
}

  handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was:`+ this.state.cityName);

      fetch(`https://api.openweathermap.org/data/2.5/weather?q=`+this.state.cityName+`&appid=f3ee66722740d00cc6f197cbcab3d534`, {
        method: 'GET'
      }).then((response) => {
        console.log(response)
        this.setState({
          currWeatherRes: response
        })
        //return response.json();
      });
  }

  handleChange = (event) => {
    this.setState({cityName:event.target.value});
  }

  render() {
    return (
      <div className="weather-app">
          <form onSubmit={this.handleSubmit}>
            <input type="text" value={this.state.cityName} onChange={this.handleChange} placeholder="Enter City"/>
            <button type="submit" value="Submit">Submit</button>
          </form>
          {(typeof this.state.currWeatherRes.main != "undefined") ? (
              <div className="weather-details">
                  <div className="weather-location">
                      <div className="location">Loctaion: {this.state.currWeatherRes.name}</div>
                  </div>
              </div>
          ):('')}
      </div>
    );
  }
}

export default App;

Answer 1

问题与反应无关，而是您处理 API 呼叫的方式。

修复：

fetch(`https://api.openweathermap.org/data/2.5/weather?q=`+this.state.cityName+`&appid=f3ee66722740d00cc6f197cbcab3d534`, {
        method: 'GET'
      }).then((response) => {
        return response.json();
      }).then((res) => {
        this.setState({
          currWeatherRes: res
        })
      });

工作代码：

import React, { Component } from 'react';


class App extends Component {
  
  constructor(){
    super();

    this.state = {
        cityName: "",
        currWeatherRes: {}
    }
}

  handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was:`+ this.state.cityName);

      fetch(`https://api.openweathermap.org/data/2.5/weather?q=`+this.state.cityName+`&appid=f3ee66722740d00cc6f197cbcab3d534`, {
        method: 'GET'
      }).then((response) => {
        return response.json();
      }).then((res) => {
        this.setState({
          currWeatherRes: res
        })
      });
  }

  handleChange = (event) => {
    this.setState({cityName:event.target.value});
  }

  render() {
    console.log(this.state.currWeatherRes)
    return (
      <div className="weather-app">
          <form onSubmit={this.handleSubmit}>
            <input type="text" value={this.state.cityName} onChange={this.handleChange} placeholder="Enter City"/>
            <button type="submit" value="Submit">Submit</button>
          </form>
          {(typeof this.state.currWeatherRes.main != "undefined") ? (
              <div className="weather-details">
                  <div className="weather-location">
                      <div className="location">Loctaion: {this.state.currWeatherRes.name}</div>
                  </div>
              </div>
          ):('')}
      </div>
    );
  }
}

export default App;

React class 组件状态值未更新

React class component state value not updating

javascript

state

class

reactjs