Блог

Я пытаюсь отобразить информацию, которую я получил с сервера погоды. Я console.log(data) , и это работает, но у меня возникли проблемы с отображением его в интерфейсе. Я предполагаю, что проблема может быть связана с тем, как я использую асинхронность и ожидание. Кто-нибудь знает, в чем может быть потенциальная проблема?

 import React, {useState, useEffect} from 'react' import Card from 'react-bootstrap/Card' import 'bootstrap/dist/css/bootstrap.min.css'; import './Page_Styled.css' import axios from 'axios';  const BASE_URL = "https://www.metaweather.com/api/location"; const CROSS_DOMAIN = "https://the-ultimate-api-challenge.herokuapp.com" const REQUEST_URL = `${CROSS_DOMAIN}/${BASE_URL}`   function Page() {  const [data, setData] = useState("");    useEffect(async () =gt; {  await axios.get(`${REQUEST_URL}/1103816`)  .then(res =gt; {  const weatherData = res.data;  setData(weatherData);  })  }, [])    return (  lt;div className="mx-auto page--container"gt;  {!data === "" amp;amp;  lt;Cardgt;  lt;Card.Bodygt;  lt;Card.Titlegt;This is Weather Cardlt;/Card.Titlegt;  {/* Location */}  lt;Card.Textgt;Min degree: {data.consolidated_weather[0].min_temp}lt;/Card.Textgt;   {/* Maximum degree */}  lt;Card.Textgt;Max degree: {data.consolidated_weather[0].max_temp}lt;/Card.Textgt;  {/* Minimum degree */}  lt;Card.Textgt;Location: {data.parent.title}lt;/Card.Textgt;  lt;/Card.Bodygt;  lt;/Cardgt;  }  {data === "" amp;amp; lt;pgt;Program cannot progresslt;/pgt;}  lt;/divgt;  ) }  export default Page   

Вам не нужно использовать then при использовании async await , пожалуйста, попробуйте обновить свой useEffect as

 useEffect(() =gt; {  async function getData() {  let res = await axios.get(`${REQUEST_URL}/1103816`);  setData(res.data);  }  getData()  }, []);  

Измените свой эффект использования следующим образом:

 useEffect(() =gt; {  (async () =gt; {  const response = await axios.get(`${REQUEST_URL}/1103816`);  if (response.data) {  setData(weatherData);  }  }); });