使用 axios 和 useEffect 无法显示信息答案

【问题标题】：Cannot display information using axios and useEffect使用 axios 和 useEffect 无法显示信息
【发布时间】：2022-01-07 22:04:57
【问题描述】：

我正在尝试显示从天气服务器检索到的信息。我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 () => {
        await axios.get(`${REQUEST_URL}/1103816`)
        .then(res => {
            const weatherData = res.data;
            setData(weatherData);
        })
    }, []) 

    return (
        <div className="mx-auto page--container">
        {!data === "" &&
            <Card>
                <Card.Body>
                    <Card.Title>This is Weather Card</Card.Title>
                    {/* Location */}
                    <Card.Text>Min degree: {data.consolidated_weather[0].min_temp}</Card.Text> 
                    {/* Maximum degree */}
                    <Card.Text>Max degree: {data.consolidated_weather[0].max_temp}</Card.Text>
                    {/* Minimum degree */}
                    <Card.Text>Location: {data.parent.title}</Card.Text>
                    </Card.Body>
            </Card>
            }
            {data === "" && <p>Program cannot progress</p>}
        </div>
    )
}

export default Page

【问题讨论】：

请在问题中包含console.log 的输出。

标签： reactjs axios use-effect

【解决方案1】：

使用async await时，不需要使用then 请尝试将您的useEffect 更新为

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

【讨论】：

【解决方案2】：

像这样改变你的 useEffect：

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

【讨论】：