Почему при обработке события возникает ошибка?

Question

[Mark]

import React from "react";
import Info from "./components/info";
import Form from "./components/Form";
import Weather from "./components/Weather";

const API_KEY = "";

class App extends React.Component {

gettingWeather = async (e) => {
  e.preventDefault();
  const api_url = await
  fetch(`api.openweathermap.org/data/2.5/weather?q=Kiev,ua&appid=${API_KEY}&units=metric`);
  const data = await api_url.json();
  console.log(data);
}


	render(){
		return (
        <div>
				<Info />
				<Form weatherMethod={this.gettingWeather} />
				<Weather />
        </div>
	  );
	}
}

export default App;

Почему при клике на кнопку возникает какая-то ошибка? И как ее решить?

Comments

[Роман Александрович]

какая-то ошибка?

так покажите скриншот ошибки или просто напишите что вам в консоль выдает

[webe]

Какой текст у ошибки?

Answer 1

[0xD34F]

Может, стоит добавить что-то вроде https:// в начало url'а, на который вы пытаетесь сделать запрос?

Answer 2

[hzzzzl]

а еще чтобы ловить ошибки это надо заворачивать в try catch, если не хочется писать fetch().then().catch()

try {
  const api_url = await fetch(`api.openweathermap.org/data/2.5/weather?q=Kiev,ua&appid=${API_KEY}&units=metric`);
  const data = await api_url.json();
} catch (err) {
  console.log('какая-то ошибка', err)
}

ну и да, наверняка https://api.openweather....

ps / не забывай, что в таком случае твой api key увидят все прямо в браузере, надо делать запрос на "закрытые апи" на стороне сервера, а из реакта делать запрос на свой сервер типа fetch('/api/getweather')

Comments

[Mark]

Ок, спасибо за совет, я только начинаю учить React и еще чайник)