如何为首个天气应用调用API？OpenWeatherMap开发问题求助

1. API Key获取方式 #

• 注册OpenWeatherMap平台账号并完成邮箱验证
• 登录后进入个人控制台的API Keys栏目
• 直接复制系统默认生成的免费密钥即可使用，免费额度完全满足开发测试需求

2. 类组件转换与修正 #

你提供的代码已经是类组件的基础结构，只需修正原有配置和逻辑错误即可完成函数组件转类组件的需求：

• 修正API基础地址版本：官方公开接口版本为2.5，你填写的2.0不存在会请求失败
• 修正输入框name属性：和state中searchBar字段保持一致，否则双向绑定失效
• 删除无效的componentDidMount请求逻辑：原有请求缺少必填的查询参数、密钥、协议，无法正常返回数据

3. 搜索触发请求功能实现 #

新增回车触发搜索逻辑，输入城市名后按回车键即可调用接口获取天气数据，完整修正后的代码如下：

import React, { Component } from "react"

const api = {
    key: "替换为你自己的API Key",
    base: "https://api.openweathermap.org/data/2.5/" 
}

class Weather extends Component {
    constructor() {
        super()
        this.state = {
            searchBar: "",
            temp: "",
            weather: "",
            location: "",
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleKeyPress = this.handleKeyPress.bind(this)
    }

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

    handleKeyPress(event) {
        if (event.key === "Enter") {
            this.fetchWeather()
        }
    }

    fetchWeather() {
        fetch(`${api.base}weather?q=${this.state.searchBar}&units=metric&appid=${api.key}&lang=zh_cn`)
            .then(res => res.json())
            .then(data => {
                this.setState({
                    location: `${data.name}, ${data.sys.country}`,
                    temp: Math.round(data.main.temp),
                    weather: data.weather[0].main
                })
            })
    }

    render() {
        let date = String(new window.Date());
        date = date.slice(0,15)

        return(
            <div className="App">
                <main>
                    <div className="search-box">
                        <input 
                            type="text"
                            name="searchBar" 
                            className="search-bar"
                            placeholder="输入城市名按回车搜索"
                            onKeyPress={this.handleKeyPress}
                            onChange={this.handleChange}
                            value={this.state.searchBar}
                        /> 
                    </div>
                    {this.state.location && (
                        <div className="location-box">
                            <div className="location">{this.state.location}</div>
                            <div className="date">{date}</div>
                            <div className="weather-box">
                                <div className="temp">{this.state.temp}°c</div>
                                <div className="weather">{this.state.weather}</div>
                            </div>
                        </div>
                    )}
                </main>
            </div>
        )
    }
}

export default Weather

• 代码中units=metric参数表示返回摄氏度单位，lang=zh_cn表示返回中文天气描述
• 搜索成功后才会渲染天气卡片，避免空数据显示异常

内容的提问来源于stack exchange，提问作者iNfam0usColors