Получение данных из API и вывод на странице?

Question

[Nero_077]

Я создавал сайт с погодой и не получается вывести данные с API на страницу. return data не помогает. Как получить data.

import { useState  } from "react";
import "./main.css"


function Main() {

  let API_KEY = "f621742c67e9f1c2440126216a490708";

  let [city, setCity] = useState("");

       let getWeather = async (e) => {
          e.preventDefault();
          let api_url = await
          fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`)
          const data = await api_url.json()
          return data;
        }
    
    
  return (
    < >
    <form>
    <div><h2 className="main_info">Weather information</h2></div>
    <input className="input" value={city} onChange={e=>setCity(e.target.value)} type="text" placeholder="Название города"/>
    <button className="btn" onClick={getWeather}>Получить данные</button>
    <p>{data.name}</p>
    <p>{data.tittle}</p>
    </form>

    </>
  );
}

export default Main;

Comments

[Вадим]

1) никогда не публикуйте свои ключи.
2) и что толку от того что вы возвращаете из функции данные, есди реакт их не отслеживает? Что такое data в вашем шаблоне? Такой переменной нет. Она существует только внутри функции getWeather. Но с city вы почему то сделали правильно.

Это говорит о том что вы плохо знаете что такое:
1) область видимости в javascript
2) как устроена реактивность в реакте
3) зачем нужен use state hook
4) что возвращает любая async функция

[szQocks]

...

[szQocks]

Вадим, +

Answer 1

[Flesh Herbal]

Во первых у вас переменная data находится внутри функции, эта самая data это есть результат функции getWeather.
Во вторых, даже если вы захотите получить результат функции, то она вернет вам промис.

const [data, setData] = useState({});

const getWeather = () => fetch("ваша ссылка", {method: "GET"}).then((response) => {обрабатываем статус коды})
     .then(result => setData(result)).catch(e => console.erreoe(e));