Передача данных API через React

avatar
dishbin
8 августа 2021 в 23:03
44
1
0

У меня есть функция getData(), которая получает объект JSON с текущими погодными условиями. Хотя я вижу объект JSON в консоли, я не могу передать его в полезную переменную. Что мне здесь не хватает?

    const getData = () => {
      let url = `https://api.openweathermap.org/data/2.5/weather?q=Asheville&appid=${key}`
      fetch(url)
          .then((response) => {
            return response.json();
          })
          .then((response) => {
             console.log(response);
          })
          .catch((err) => {
            console.log(err);
          })
    }

    function App() {
      let data = getData();
      console.log(data);
      return (
        <div className="App">
          <Forecast />
        </div>
      );
    }

Я попробовал несколько способов, но они не работают. Также по какой-то причине он дважды входит в консоль, и я не уверен, почему. Мы очень признательны за любые советы!

Источник
evolutionxbox
8 августа 2021 в 23:08
0

Я полагаю, вы учитесь в том же классе, что и coderhelper.com/questions/68705249/failed-to-fetch? --- См. также Извлечение данных внутри хука useEffect перед рендерингом - React

dishbin
8 августа 2021 в 23:37
0

Woah только что увидел ваш комментарий здесь, все еще новичок в SO. Это очень полезно! Большое спасибо! Первая ссылка отличный пример.

Ответы (1)

avatar
Daisho Arch
8 августа 2021 в 23:18
1

Вы можете использовать хуки реагирования

const useGetData = () => {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    let url = `https://api.openweathermap.org/data/2.5/weather?q=Asheville&appid=${key}`;
    fetch(url)
      .then((response) => response.json())
      .then((response) => setData(response))
      .catch((err) => setError(err));
  }, []);

  return [data, error];
};

function App() {
  let [data, error] = useGetData();

  return (
    <div>
      <p>{JSON.stringify(data, null, 2)}</p>
      {error && <p>There's been an error: {error}</p>}
    </div>
  );
}
dishbin
8 августа 2021 в 23:24
0

Хорошо, спасибо, пойду поищу крючки.

Daisho Arch
8 августа 2021 в 23:26
0

@dishbin Если вы найдете мой ответ полезным, вы должны отметить его как правильный.

evolutionxbox
9 августа 2021 в 00:04
0

@dishbin не забудьте использовать оператор if, чтобы проверить, существуют ли данные перед рендерингом.