有关从开关功能内的表单获取数据的问题

时间:2019-08-12 18:43:20

标签: reactjs

我正在使用开关功能来选择要渲染的组件。我目前正在尝试捕获提交表单时创建的道具。但是,当我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>
        );
     }

0 个答案:

没有答案