Как отобразить данные API в консоль и чтобы не было перезагрузки страницы?

Question

[hulktoster]

Делаю приложение погоды.
API которое будет отображать в приложении погоду по городу London взял из сайта https://openweathermap.org.

Когда в форме ввожу london и нажимаю кнопку, должны в консоли появиться данные о погоде но их нет, и страница перезагружаеться после нажатия кнопки. event.preventDefault написал но все равно страница перезагружаеться. Я думаю, то что нет данных в консоли, может быть связано как раз таки с перезагрузкой страницы, но не уверен.

Код файла App.js:

import React from "react";              	
import Info from "./components/info";  
import Form from "./components/form";  	
import Weather from "./components/weather";  	
	
const API_KEY ="89fdfjkd83434jfdfd438823fd";	
	
class App extends React.Component {    
    
		
gettingWeather = async (event) => {	
    event.preventDefault();
    const api_url = await fetch(`https://samples.openweathermap.org/data/2.5/weather?q=London&appid=${API_KEY}`);	
    const data = await api_url.json();	
    console.log(data);
}

 render (){                              
     return (                            	
             <div>	
                <Info />	
                <Form wetherMethod={this.gettingWether} />	
                <Weather />
           </div>	
	);	
  }	
}	
export default App;

В чем проблема?

Comments

[Егор Живагин]

1 - не светите свой API_KEY :)
2 - Посмотрите в консоли вкладку Networks, запрос хотя бы отправляется?
3 - Как у вас реализована форма? Как вызывается weatherMethod ?

Answer 1

[hzzzzl]

что в Form?

<form onSubmit={e => this.props.gettingWeather(e)}> 
.....

?

Comments

[hulktoster]

<form onSubmit={this.props.weatherMethod}>
             <input type="text" name="city" placeholder="Город"/>
             <button>Получить погоду</button>
 </form>

[hzzzzl]

hulktoster, то есть да, я неправильно написал, именно this.props.weatherMethod правильно

хммм, в консоли есть галочка Preserve Log, чтобы всё сохранялось несмотря на перезагрузку.. запрос на open weather вообще уходит и результат возвращается?

[hulktoster]

hzzzzl, когда нажимаю кнопку получить погоду в консоли вот такое пишет:
Navigated to localhost:3000/?city=London
Тоесть походу запрос вообще не уходит на openweather...

[hzzzzl]

hulktoster, кстати там же в любом случае надо на api.openweather обращаься, а не на samples?

https://api.openweathermap.org/data/2.5/weather?q=...

[hulktoster]

hzzzzl, спасибо сейчас попробую, а где вы на этом сайте нашли api.openweather а то я только samples находил?

[hzzzzl]

hulktoster, в общем вроде всё работает же
https://codesandbox.io/s/unruffled-kalam-fymvy

https://openweathermap.org/current

API call:
api.openweathermap.org/data/2.5/weather?q={city name}

api.openweathermap.org/data/2.5/weather?q={city name},{country code}

Parameters:
q city name and country code divided by comma, use ISO 3166 country codes

Examples of API calls:
api.openweathermap.org/data/2.5/weather?q=London

[hulktoster]

hzzzzl,
Тоесть ссылки в Api call использовали?

[hzzzzl]

hulktoster, так точно, только APPID надо добавить еще с ключом

https://api.openweathermap.org/data/2.5/weather?q=...

[hulktoster]

hzzzzl, спасибо) работает)