Json 当我在react中从表单更新状态时，子组件中的数据会出现奇怪的行为

我有一个简单的反应天气应用程序，我从中选择一个城市，然后，我需要重新加载数据。基本上，它工作得很好。但在城市发生变化后，我的子组件显示新数据、旧数据，并重复几次，之后，组件显示良好的数据。怎么了

我尝试从组件生命周期方法中实现一些功能，但没有成功

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

import Form from "./Components/Form"
import Overcast from "./Components/Overcast"
import Forecast from "./Components/Forecast"

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

    this.state = {
      forecasts: [{}],
      selectedCity: 1
    }

    this.handleCityChange = this.handleCityChange.bind(this)
    this.fetchForeacst = this.fetchForeacst.bind(this)
  }

  componentDidMount() {
    var today = new Date()
    var day = String(today.getDate()).padStart(2, '0')
    var month = String(today.getMonth() + 1).padStart(2, '0')
    var year = String(today.getFullYear())

    today = year + '-' + month + '-' + day

    this.fetchForeacst(today)
  }

  componentDidUpdate() {
    var today = new Date()
    var day = String(today.getDate()).padStart(2, '0')
    var month = String(today.getMonth() + 1).padStart(2, '0')
    var year = String(today.getFullYear())

    today = year + '-' + month + '-' + day

    this.fetchForeacst(today)
  }

  fetchForeacst(date) {
    const WEATHER_API = 'http://dev-weather-api.azurewebsites.net/api/city/' + this.state.selectedCity + '/weather?date=' + date + ''
    fetch(WEATHER_API)
      .then(response => response.json())
      .then(data => this.setState({forecasts: data}))
  }

  handleCityChange(city) {
    this.setState({selectedCity: city})

  }

  render() {
    return (
      <div className="App">
        <Form handleChange={this.handleCityChange}/>
        <Overcast forecast={this.state.forecasts[0]} />
        <Forecast forecasts={this.state.forecasts} />
      </div>
    )
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“/Components/Form”导入表单
从“/组件/阴天”导入阴天
从“/Components/Forecast”导入预测
类应用程序扩展组件{
建造师（道具）{
超级（）
此.state={
预测：[{}]，
选定城市：1
}
this.handleCityChange=this.handleCityChange.bind（this）
this.fetchForeacst=this.fetchForeacst.bind（this）
}
componentDidMount（）{
var today=新日期（）
var day=String（today.getDate（））.padStart（2，'0'）
var month=String（今天.getMonth（）+1）。padStart（2，'0'）
var year=String（today.getFullYear（））
今天=年+月+日
这是今天的
}
componentDidUpdate（）{
var today=新日期（）
var day=String（today.getDate（））.padStart（2，'0'）
var month=String（today.getMonth（）+1）.padStart（2，'0'）
var year=String（today.getFullYear（））
今天=年+月+日
这是今天的
}
fetchForeacst（日期）{
康斯特天气预报中心http://dev-weather-api.azurewebsites.net/api/city/“+this.state.selectedCity+”/weather？日期=“+date+”
获取（天气预报）
.then（response=>response.json（））
.then（data=>this.setState（{forecast:data}））
}
handleCityChange（城市）{
this.setState（{selectedCity:city}）
}
render（）{
返回(
)
}
}
导出默认应用程序；

---

我没有任何错误或其他东西。

您在didUpdate上调用fetch api，它会触发setState，它会一次又一次地调用didUpdate。这就是为什么你会看到循环。您应该将fetch封装在if语句中，如下所示：

 componentDidUpdate(prevProps, prevState) {
    if(prevState.selectedCity !== this.state.selectedCity) {
        var today = new Date()
        var day = String(today.getDate()).padStart(2, '0')
        var month = String(today.getMonth() + 1).padStart(2, '0')
        var year = String(today.getFullYear())

        today = year + '-' + month + '-' + day

        this.fetchForeacst(today)      
     }
}

---

希望这有帮助。快乐编码

伙计！你太棒了！非常感谢；）