我正在使用2个API,从1开始,我提取纬度和经度,然后获取我的2nd API参数以获取天气JSON数据。
在表单部分,我使用了简单的文本输入来输入城市名称,使用日期选择器可以从中选择天气信息的日期,并使用按钮进行提交。
怎么了?
this.state.lon
时,它正确地将经度渲染到了我的页面。lon
和lat
的查询参数为空import React, { Component } from "react";
import DatePicker from "react-date-picker";
class Form extends Component {
state = {
inputCity: "",
lat: "",
lon: "",
date: new Date(),
condition: "",
minimumTemperature: "",
maximumTemperature: "",
calendar: ""
};
apicall() {
let API_KEY_OPEN_WEATHER = "my api";
let city = this.state.inputCity;
let corsCurrent = `http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${API_KEY_OPEN_WEATHER}&units=metric`;
fetch(corsCurrent)
.then(results => {
return results.json();
})
.then(data => {
console.log(data);
let lat = data.coord.lat;
let lon = data.coord.lon;
let condition = data.weather[0].main;
let minimumTemperature = data.main.temp_min;
let maximumTemperature = data.main.temp_max;
this.setState({
lat: lat,
lon: lon,
condition: condition,
minimumTemperature: minimumTemperature,
maximumTemperature: maximumTemperature
});
});
}
apicall1() {
let API_KEY_OPEN_WEATHER = "my api";
let API_KEY_DARKSKY = "my api";
let city = this.state.inputCity;
let lat = this.state.lat;
let lon = this.state.lon;
let unix = this.state.calendar;
let corsCurrent = `http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${API_KEY_OPEN_WEATHER}&units=metric`;
let corsHistorical = `https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/${API_KEY_DARKSKY}/${lat},${lon},1579257722?exclude=currently,flags,minutely,hourly`;
fetch(corsHistorical)
.then(results1 => {
return results1.json();
})
.then(data1 => console.log(data1));
}
onChange = date => {
this.setState({ date });
console.log("changed");
};
handleSubmit = e => {
console.log("submit");
e.preventDefault();
this.apicall();
let year = this.state.date.getFullYear();
let month = this.state.date.getMonth() + 1;
let date = this.state.date.getDate();
let calendarr = year + "," + " " + month + "," + " " + date;
this.setState({
calendar: calendarr
});
};
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
onChange={e => this.setState({ inputCity: e.target.value })}
type="text"
placeholder="Enter City Name"
required
/>
<button type="submit">Submit</button>
</form>
<DatePicker onChange={this.onChange} value={this.state.date} />
<p>{this.state.lat}</p>
<p>{this.state.lon}</p>
<p>{this.state.condition}</p>
<p>{this.state.minimumTemperature}</p>
<p>{this.state.maximumTemperature}</p>
<p>{new Date(this.state.calendar).getTime()}</p>
</div>
);
}
}
export default Form;
我注意到您缺少组件的构造函数。
import React, { Component } from "react";
import DatePicker from "react-date-picker";
class Form extends Component {
constructor(props) {
super(props);
this.state = {
inputCity: "",
lat: "",
lon: "",
date: new Date(),
condition: "",
minimumTemperature: "",
maximumTemperature: "",
calendar: ""
};
}
apicall() {
let API_KEY_OPEN_WEATHER = "my api";
let city = this.state.inputCity;
let corsCurrent = `http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${API_KEY_OPEN_WEATHER}&units=metric`;
fetch(corsCurrent)
.then(results => {
return results.json();
})
.then(data => {
console.log(data);
let lat = data.coord.lat;
let lon = data.coord.lon;
let condition = data.weather[0].main;
let minimumTemperature = data.main.temp_min;
let maximumTemperature = data.main.temp_max;
this.setState({
lat: lat,
lon: lon,
condition: condition,
minimumTemperature: minimumTemperature,
maximumTemperature: maximumTemperature
});
});
}
apicall1() {
let API_KEY_OPEN_WEATHER = "my api";
let API_KEY_DARKSKY = "my api";
let city = this.state.inputCity;
let lat = this.state.lat;
let lon = this.state.lon;
let unix = this.state.calendar;
let corsCurrent = `http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${API_KEY_OPEN_WEATHER}&units=metric`;
let corsHistorical = `https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/${API_KEY_DARKSKY}/${lat},${lon},1579257722?exclude=currently,flags,minutely,hourly`;
fetch(corsHistorical)
.then(results1 => {
return results1.json();
})
.then(data1 => console.log(data1));
}
onChange = date => {
this.setState({ date });
console.log("changed");
};
handleSubmit = e => {
console.log("submit");
e.preventDefault();
this.apicall();
let year = this.state.date.getFullYear();
let month = this.state.date.getMonth() + 1;
let date = this.state.date.getDate();
let calendarr = year + "," + " " + month + "," + " " + date;
this.setState({
calendar: calendarr
});
};
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
onChange={e => this.setState({ inputCity: e.target.value })}
type="text"
placeholder="Enter City Name"
required
/>
<button type="submit">Submit</button>
</form>
<DatePicker onChange={this.onChange} value={this.state.date} />
<p>{this.state.lat}</p>
<p>{this.state.lon}</p>
<p>{this.state.condition}</p>
<p>{this.state.minimumTemperature}</p>
<p>{this.state.maximumTemperature}</p>
<p>{new Date(this.state.calendar).getTime()}</p>
</div>
);
}
}
export default Form;