使用 axios 和 useEffect 无法显示信息

Posted 2023-03-17

【中文标题】使用 axios 和 useEffect 无法显示信息

【英文标题】：Cannot display information using axios and 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 的输出。

【参考方案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);
    
  );
);