api - 如何修复我的 console.log 的“错误查询”消息？

Question

现在我接近让我的天气应用程序工作，但控制台说：{cod：'400'，消息：'bad query'} cod：“400”消息：“bad query”。这是对我的 console.log(response) 代码说的。当用户在城市中键入以获取 api 并获取数据时，我正在尝试制作和 onkeypress 事件。这是唯一困扰我的事情。

 import React, { Component } from "react"
    
    
    const API_key = "a157071058623"
       
    
    class App extends Component {
    
        
        constructor(props) {
            super(props)
            this.state = {
                city: '',
                country: '',
                weather: '',
                temp:'',
                
    
                
    
            }
    
            
    
            this.handleChange = this.handleChange.bind(this)
            //this.enterChange = this.enterChange.bind(this)
            
        }
    
            /*enterChange (event) {
                const city = event.value.target
                    if (event.key === 'Enter') {
                        fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_key}`)
    
                    
                    }
                
            }*/
        
        handleChange(event) {
            const {name, value,} = event.target
            
    
                this.setState({[name]: value})
    
                this.enterChange = async (e) => {
                    e.preventDefault();
                    const city = event.value
                    const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_key}`)
                    const response = await api_call.json();
                    
                    console.log(response);
                    
                    this.setState({
                        city: `${response.name}`,
                        country: `${response.sys.country}`,
                        temp: this.calCelsius(`${response.main.temp}`),
                        weather: `${response.weather[0].main}`
                    })
                
                }
            
            
            
        
        }
    
        calCelsius(temp) {
            let cell = Math.floor(temp-273.15)
            return cell;
        }
    
        
    
    
                
        render() {
            let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
            let date = String(new window.Date());
            date = date.slice(0,15)
            
        
    
            return(
                <div className={
                    (typeof this.state.weather != "undefined") ? ((this.state.temp > 16) ? 'app hot' : 'app') : 'app' }>
                    
                    <main>
                        <div className="search-box">
                            <input type="text" 
                            className="search-bar"
                            placeholder="Enter a city"
                            name="city"
                            onKeyPress={this.handleChange}
                            onChange={this.enterChange}
                            value={this.state.value}/> 
                        </div>
    
                        
                        <div className="location-box">
                            <div className="location">{this.state.city},{this.state.country} </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 App

标签： apifetchopenweathermapweather-apionkeypress