reactjs - UseEffect 挂钩不起作用或如何显示异步数据

Question

我正在学习反应并制作一个项目，该项目具有需要显示异步信息的组件：

function ShortStatistic() {

    const [coronaData, setCoronaData] = useState([]);
    
    useEffect(() => {
        (async () => {
            const fetchedPosts = await getCoronaData();
            setCoronaData(fetchedPosts);
        })();
        console.log("UseEffectCall");
    }, []);

    async function getCoronaData() {
        const URL = "https://api.covid19api.com/summary";
        const requestOptions = {
            method: 'GET',
            redirect: 'follow'
        };
      
        const response = await fetch(URL, requestOptions);
        const data = await response.json();
        return data;
    }


    return (
        <div className="stat">
             <div className="stat_infected">
                  Infected:
                    <span className="infected_numbers">
                         {(coronaData["Global"]["TotalConfirmed"])}
                    </span>
              </div>
        </div>
    )
}

但是我收到一个错误：“TypeError：无法读取未定义的属性 'TotalConfirmed'”，这意味着 setCoronaData() 不起作用。此外，控制台中的 useEffect 挂钩 (console.log("UseEffectCall");) 没有消息输出。问题是什么？

Answer 1

对于第一次渲染你的 coronaData 变量是一个空数组 [] 并且当你调用

coronaData["Global"]["TotalConfirmed"] 

这意味着未定义

您可以使用

coronaData?.["Global"]?.["TotalConfirmed"]