在我的Reactjs项目中，天气信息是通过weatherbit api调用的。我创建了切换元素，该元素可在celcius和farenheit之间切换，反之亦然。现在，当我输入特定的城市名称并搜索天气信息时，它可以在当前位置正常工作，但是在从celcius切换到farenheit之后，它会返回到当前位置天气信息
App.js（父文件）
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,lat: '',lon: '',city: '',country: '',humidity: '',temperature: '',wind: '',description: '',maxTemp: '',minTemp: '',precip: '',pressure: '',hourlyforecast: '',error: '',unit: 'C',sunrise: '',sunset: '',}
}
componentDidmount = async () => {
// Tracking the location and
// Setting the state of latitude and longitude values
navigator.geolocation.getcurrentPosition(async (position) => {
this.setState({
lat: position.coords.latitude.toFixed(3),lon: position.coords.longitude.toFixed(3)
},this.notifyStateChange)
},(error) => {
toast.error(`${error.message}`,{
autoClose: 3000
})
// toast.error(`ERROR(${error.code}): ${error.message}` )
},{
enableHighaccuracy: true,timeout: 50000,maximumAge: 1000
})
// console.log('weather 2 info',localStorage.getItem('weather2'))
// console.log('weather info',localStorage.getItem('weather'))
}
// Function that recieves city input and then displays weather info
getWeather = async (e) => {
e.preventDefault();
const city = e.target.elements.city.value;
const unitType = (this.state.unit === 'C') ? 'M' : 'I';
console.log('UNITTYPE',unitType)
try {
// 1. weatherbit current data
const api_call4 = await fetch(`https://api.weatherbit.io/v2.0/current?` +
`city=${city}&units=${unitType}&key=${API_KEY3}`)
const data4 = await api_call4.json();
console.log('DATA CURRENT',data4)
// 2. weatherbit forecast data
const api_call3 = await fetch(`https://api.weatherbit.io/v2.0/forecast/daily` +
`?city=${city}&units=${unitType}&days=6&key=${API_KEY3}`)
const data3 = await api_call3.json();
console.log('DATA FORECAST',data3)
// 3. weatherbit hourly data
const api_call2 = await fetch(`https://api.weatherbit.io/v2.0/forecast/hourly` +
`?city=${city}&units=${unitType}&key=${API_KEY3}&hours=10`)
const data2 = await api_call2.json();
console.log('DATA HOURLY',data2)
if(city) {
this.setState({
temperature: data4.data[0].temp,city: data4.data[0].city_name,country: data4.data[0].country_code,humidity: data4.data[0].rh,maxTemp: data4.data[0].app_max_temp,minTemp: data4.data[0].app_min_temp,wind: data4.data[0].wind_spd,description: data4.data[0].weather.description,pressure: data4.data[0].pres,error: "",precip: data3.data[0].pop,forecastdays: data3.data,hourlyforecast: data2.data,maxTemp: data3.data[0].app_max_temp,minTemp: data3.data[0].app_min_temp,sunrise: data3.data[0].sunrise_ts,sunset: data3.data[0].sunset_ts,isLoading: false
},() => {
localStorage.setItem('weather2',JSON.stringify(this.state))
})
} else if(city === '') {
this.setState({
temperature: this.state.temperature,city: this.state.city,country: this.state.country,humidity: this.state.humidity,wind: this.state.wind,description: this.state.description,pressure: this.state.pressure,forecastdays: this.state.forecastdays,hourlyforecast: this.state.hourlyforecast,precip: this.state.precip,maxTemp: this.state.maxTemp,minTemp: this.state.minTemp,error: toast.error("City cannot be empty",{
autoClose: 3000
})
})
}
}
catch {
toast.error('No Data Received',{
autoClose: 3000
})
}
}
// Function that recieves toggle unit
onUnitChange = (newUnit) => {
this.setState({
unit: newUnit
},this.notifyStateChange)
}
// Inclusion of both functions
notifyStateChange = () => {
if(this.state.lat && this.state.lon) {
this.fetchWeather()
} else {
this.getWeather()
}
}
// This function tracks current user location and displays weather info
fetchWeather = () => {
const {lat,lon} = this.state
const unitType = (this.state.unit === 'C') ? 'M' : 'I';
console.log('UNITTYPE',unitType)
// Current Weather
fetch(`${CURRENT_API}lat=${lat}&lon=${lon}&units=${unitType}&key=${API_KEY3}`)
.then(res => res.json()).then(responseJson => {
try {
console.log('DATA CURRENT',responseJson)
this.setState({
city: responseJson.data[0].city_name,country: responseJson.data[0].country_code,temperature: responseJson.data[0].temp,wind: responseJson.data[0].wind_spd,humidity: responseJson.data[0].rh,pressure: responseJson.data[0].pres,description: responseJson.data[0].weather.description,isLoading: false,},() => {
localStorage.setItem('weather',JSON.stringify(this.state))
})
} catch {
toast.error('Error Code 429')
}
});
// Forecast Weather - Daily
fetch(`${FORECAST_API}lat=${lat}&lon=${lon}&units=${unitType}&days=6&key=${API_KEY3}`)
.then(res => res.json()).then(responseJson => {
try {
console.log('DATA I GET',responseJson)
this.setState({
forecastdays: responseJson.data,precip: responseJson.data[0].pop,maxTemp: responseJson.data[0].app_max_temp,sunrise: responseJson.data[0].sunrise_ts,sunset: responseJson.data[0].sunset_ts,minTemp: responseJson.data[0].app_min_temp,isLoading: false
},() => {
localStorage.setItem('weather',JSON.stringify(this.state))
})
} catch {
toast.error('Too many requests')
}
});
// Forecast Weather - Hourly
fetch(`${HOURLY_API}lat=${lat}&lon=${lon}&units=${unitType}&key=${API_KEY3}&hours=10`)
.then(res => res.json()).then(responseJson => {
try {
this.setState({
hourlyforecast: responseJson.data,JSON.stringify(this.state))
})
} catch {
toast.error('Please wait some time')
}
});
}
render() {
const {isLoading,forecastdays,hourlyforecast,precip} = this.state;
return (
<div classname="container" style={{marginTop: '3.5em'}}>
<div classname="row">
<div classname="col-sm-4 form-container">
<Form getWeather={this.getWeather}/>
</div>
{isLoading ? <Spinner/>:
<React.Fragment>
<div classname="col-sm-8 image-container">
{/* Weather Card */}
<div classname="background">
<div classname="container">
<div id="card" classname="weather" style={sectionStyle}></div>
<div id="card" classname="weather2" style={{background: ''}}>
<div classname="details">
{/* Weather Details */}
<div classname="content" style={{width: '125px'}}>
<Weather
temperature={this.state.temperature}
city={this.state.city}
country={this.state.country}
humidity={this.state.humidity}
description={this.state.description}
pressure={this.state.pressure}
wind={this.state.wind}
maxTemp={this.state.maxTemp}
minTemp={this.state.minTemp}
precip={precip}
tempUnit={this.state.tempUnit}
/>
</div>
{/* Forecast Cards */}
<div classname="content" style={{width: '360px',marginTop: '-40px'}}>
<div style={{display: 'table',width: '300px'}}>
<ConvertTempButton
style={{display: 'table-cell'}}
changeUnit={this.onUnitChange}
onUnitChange={this.onUnitChange}
unit={this.state.unit}
/>
</div>
</div>
{/* Forecast Cards Ends*/ }
</div>
</div>
</div>
</div>
</div>
{/* Weather Card Ends */}
</React.Fragment>
}
</div>
</div>
);
}
}
export default App
正如您在上面看到的那样，切换开关适用于fetchWeather，但不适用于getWeather。我是否必须对getWeather或notifyStateChange进行任何更改，或者代码结构不正确，请提出建议。预先感谢