请帮我构建我的API调用,我不知道在哪里放我的密钥和查询?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (11)

我正在尝试将我的API调用正确地构建到openweatherapi,只是尝试创建一个简单的天气应用程序,在用户进入城市时,预测会呈现给页面。这是我到目前为止,还试图阻止按下按钮时页面刷新的默认操作。我正在使用反应。

class App extends Component {
  getWeatherData = (userInput, event) => {
    event.preventDefault();
    axios({
      url: "http://openweathermap.org/data/2.5/weather/",
      method: "GET",
      dataType: "json",
      data: {
        q: userInput,
        API_KEY: "d108038ec889cfe762230283abaa7c7b"
      }
    }).then(res => {
      console.log(res);
      this.setState({});
    });
  };

。/形成。js如下

class Form extends Component {
  render() {
    return (
      <div>
        <form onSubmit={(this.props.getWeather, e)}>
          <input type="text" name="city" placeholder="City..." />
          <input type="text" name="country" placeholder="Country" />
          <button>Get Weather</button>

        </form>
      </div>
    );
  }
}

./src/Form.js
  Line 7:  'e' is not defined  no-undef
提问于
用户回答回答于

使用类组件,我会这样做:( 每个类/函数应该拆分在不同的文件中)

/**
 * This is just a helper to encapsulate the weather fetching logic
 */
function getWeatherFromInput({ city, country }) {
    const query = `${city},${country}`;

    return axios({
        method: 'GET',
        url: `http://openweathermap.org/data/2.5/weather?${query}`,
        responseType: 'json'
    });
}

/**
 * Here is the specific form
 */
export class WeatherForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            city: '',
            country: ''
        };
    }

    handleSubmit = (event) => {
        event.preventDefault();
        this.props.onSubmit(this.state);
    };

    handleInputChange = (event) => {
        const { name, value } = event.target;
        this.setState({ [name]: value });
    };

    render() {
        const { city, country } = this.state;
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type='text'
                    name='city'
                    value={city}
                    onChange={this.handleInputChange}
                    placeholder='City...'
                />
                <input
                    type='text'
                    name='country'
                    value={country}
                    onChange={this.handleInputChange}
                    placeholder='Country'
                />
                <button type='submit'>Get weather</button>
            </form>
        );
    }
}

/**
 * And how you use it in your App
 */
export class App extends React.Component {
    constructor() {
        this.state = {
            weather: {}
        };
    }

    /**
     * The userInput is provided by the WeatherForm
     */
    handleSubmit = (userInput) => {
        getWeatherFromInput(userInput).then((response) => {
            this.setState({ weather: response.data });
        });
    };

    render() {
        return <WeatherForm onSubmit={handleSubmit} />;
    }
}
用户回答回答于

您可以将表单移动到您的应用程序类,在组件之间传递表单数据,从而完美地完成工作。

class App extends Component {
  getWeatherData = (event) => {
    const userInput = {
             event.target.city.value,
             event.target.country.value
       }
    event.preventDefault();
    axios({
      url: "http://openweathermap.org/data/2.5/weather/",
      method: "GET",
      dataType: "json",
      data: {
        q: userInput,
        API_KEY: "d108038ec889cfe762230283abaa7c7b"
      }
    }).then(res => {
      console.log(res);
      this.setState({});
    });


  render() {
    return (
      <div>
        <form onSubmit={this.getWeatherData}>
          <input type="text" name="city" placeholder="City..." />
          <input type="text" name="country" placeholder="Country" />
          <button>Get Weather</button>

        </form>
      </div>
    );
  }
}

您也不需要通过使用event关键字访问值来将userInput指定为可在函数内设置的参数。

扫码关注云+社区

领取腾讯云代金券