When I was in a text box input zip code is not real, will only show my original in this
. State. The zipcode in 27403 the zip code of the city, and how I want to use foreach traversal of future weather why not!

import React from 'react';

The import './App. CSS ';
Const apiKey='53 df5b52f003d1bd1df16a7f6f299393';


Class App extends React.Com ponent {//Initial value
The constructor () {
super();
This. State={
The zipcode: '27403',

Weather: null,


}
Enclosing handleChange=this. HandleChange. Bind (this);

}

Async componentDidMount () {//get the weather data
Const weather=await this. FetchWeather ();
Enclosing setState (
{
The weather,

}
);
The console. The log (weather)


}

FetchWeather=async ()=& gt; {//reading the weather data

Return await the fetch (` http://api.openweathermap.org/data/2.5/forecast? Zip=${this. State. The zipcode} & amp; 53 df5b52f003d1bd1df16a7f6f299393 appid=

`). Then (data=https://bbs.csdn.net/topics/> {return data. The json (); })


}//api.openweathermap.org/data/2.5/weather? Zip=${zipcode} & amp; ` appid=${apiKey}

Render () {


Const list=()=& gt; {
Let {weather}=this. The state;
Const res=[];
For (the let I=0; i Res. Push (& lt; Li key={I} & gt; {weather. The list [I]. Main. \} & lt;/li>)
}
Return res
}


if(! This. The state. The weather) {
return null;
}
if(! This. The state. The zipcode) {
return null;
}


Let {weather}=this. The state;

Return (

{the list ()} {/* function call release */}

)

}

HandleChange (event) {
Enclosing setState (
{the zipcode: event. Target. Value}
);
}

}
Export the default App;

CodePudding user response:

Add a componentShouldUpdate hook function, function calls for the weather