React中使用axios与useEffect获取天气数据可打印但无法渲染

• 条件判断逻辑错误（核心失效原因）
  运算符优先级中逻辑非!优先级高于全等===，你写的!data === ""实际等价于(!data) === ""：初始状态data是空字符串，!""结果为true，true === ""返回false；接口请求完成后data是对象，!对象结果为false，false === ""也返回false。所以卡片渲染的判断条件永远不成立，只会展示加载失败提示。
• useEffect 回调直接使用 async 语法不符合规范
  useEffect期望返回值是清理函数或者undefined，直接传入async函数会返回Promise对象，React无法正常执行副作用清理逻辑，控制台会抛出警告。
• 缺少属性访问安全防护
  条件判断修正后，如果接口返回数据结构异常，直接访问data.consolidated_weather[0]这类深层属性会直接抛出报错，导致页面白屏。
• 状态初始值定义不合理
  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() {
    // 初始值改为null，匹配后续存储对象的类型预期
    const [data, setData] = useState(null);

    useEffect(() => {
        // 内部封装异步请求函数，避免直接给useEffect传async回调
        const fetchWeather = async () => {
            try {
                const res = await axios.get(`${REQUEST_URL}/1103816`)
                setData(res.data);
            } catch (err) {
                console.error('天气接口请求失败', err)
            }
        }
        fetchWeather()
    }, []) 

    return (
        <div className="mx-auto page--container">
        {/* 修正条件判断，用可选链做属性访问防护 */}
        {data ?
            <Card>
                <Card.Body>
                    <Card.Title>This is Weather Card</Card.Title>
                    <Card.Text>Min degree: {data?.consolidated_weather?.[0]?.min_temp}</Card.Text> 
                    <Card.Text>Max degree: {data?.consolidated_weather?.[0]?.max_temp}</Card.Text>
                    <Card.Text>Location: {data?.parent?.title}</Card.Text>
                    </Card.Body>
            </Card>
            :
             <p>Program cannot progress</p>
            }
        </div>
    )
}

export default Page

内容的提问来源于stack exchange，提问作者Thanh