Блог

Прямо сейчас я близок к тому, чтобы мое приложение погоды заработало, но консоль говорит: {код: ‘400’, сообщение: ‘плохой запрос’} код: «400» сообщение: «плохой запрос». Это говорит мой код console.log(ответа). Я пытаюсь создать событие и onkeypress, когда пользователь вводит данные в городе, чтобы получить api и получить данные. Это единственное, что меня беспокоит.

  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}amp;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}amp;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