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

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

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

我正在尝试将我的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} />;
    }
}

热门问答

录音识别sdk的录音文件如何保存?

Richel码农
推荐

1.实时语音sdk内置录音器采集音频暂不支持保存语音数据,如需要保存语音数据建议上层自行采集音频数据。

2.实时语音识别sdk不支持暂停&继续操作,停止识别后重新调用start即开始识别。

云通讯im 本地消息存储数据库能否开放使用,要做一个本地聊天记录搜索功能?

推荐
您好,首先核实下您是否咨询app本地存储?App 本地存储;默认情况下,SDK 内部会对收到的消息进行存储,无需用户进行存储。用户可调用接口获取本地消息(无网络操作),另外,通过 getMessage 接口,也会获取本地消息,如果本地消息存在断层,会通过漫游消息补全。消息存储详参...... 展开详请

服务器操作台不是Windows咋换?

蒋小爱

腾讯云 · 技术支持 (已认证)

推荐
您好,您参考重装Windows系统;仅支持中国大陆地域(不含香港)。例如,Linux 重装为 Windows,Windows 重装为 Linux 。 登陆控制台 图片.png 选择【公共镜像】中Windows ,配置Windows密码,点击【开始重装】即可更换Windows 图片...... 展开详请

Golang云函数怎么做CORS?

Alfred

腾讯云 · 高级产品经理 (已认证)

推荐
设置响应 header 主要也就是相应数据结构, https://github.com/tencentyun/scf-go-lib/blob/master/cloudevents/scf/apigw.go APIGatewayProxyResponse 结构中的 header 字...... 展开详请

IM如何在离线登录后获取到多个会话的未读消息数量?

风子猪未来的前端开发工程师!成长的路上加油!勿忘初心方得始终
推荐
您好,建议按照以下步骤操作: 1. 离线上线后调用 webim.syncMsgs(updateUnreadCount); // 同步未读消息。 2. 在updateUnreadCount 回调函数中调用 webim.MsgStore.sessMap();获取会话列表,返回值是...... 展开详请

腾讯云短信服务有没有提供接口?

滑稽园扛把子

Swoole Inc · PHP工程师 (已认证)

As a PHP Developer
推荐
有接口的,个人认证用户不支持使用 API 申请短信模板,企业用户可以。详情文档:https://cloud.tencent.com/document/product/382/5817 URL 示例 POST https://yun.tim.qq.com/v5/tlssmssvr...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券