我正在使用开关功能来选择要渲染的组件。我目前正在尝试捕获提交表单时创建的道具。但是,当我console.log结果时,得到的结果是不确定的。
我正在将用户输入捕获到表单中,并使用它们动态地进行api调用。
under my App component this is my api call out
fetchWeatherData = async e => {
if (this.city && this.country) {
const PATH_BASE = 'https://api.openweathermap.org/';
const REQ_PATH = 'data/2.5/forecast?';
//review into how you are getting the data from the form.
const city = e.target.elements.city.value;
const country = e.target.elements.country.value;
const units = 'imperial';
const cnt = 10;
const url = `${PATH_BASE}${REQ_PATH}q=${city},${countryAPPID=${
process.env.REACT_APP_WEATHER_API_KEY
}&units=${units}&cnt=${cnt}`;
const response = await axios.get(url);
this.sortData(response.data);
}
This is my component switch:
getComponent(props = {} || this.props, state) {
switch (this.state.weather) {
case !this.fetchedweatherdata:
return (
<DisplayWeather
currentweather={this.state.currentweather}
currentforecast={this.state.currentforecast}
currenttime={this.state.currenttime}
/>
);
case !this.hourlyWeather:
return (
<DisplayHourlyWeather hourlyWeather={this.state.hourlyWeather} />
);
case this.fetchedweatherdata:
return (
<Form
loadWeather={this.fetchWeatherData(this.props.loadWeather)}
onSubmit={this.onSubmit}
/>
);
default:
return null;
}
}
Then this is my form component
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
fetchedWeatherdata: this.props.fetchedWeatherdata
};
}
onSubmit = e => {
e.preventDefault();
this.setState({ fetchedWeatherdata:!this.state.fetchedWeatherdata });
};
render() {
console.log(this.props.loadWeather);
return (
<form onSubmit={(this.props.loadWeather, this.onSubmit)}>
Please enter US city name for weather information <br />
<label htmlFor="cityname">City name</label>
<input type="text" name="city" placeholder="City.." />
<label htmlFor="country">Country</label>
<input type="text" name="country" placeholder="Country.."/>
<button>Get weather</button>
</form>
);
}