React中调用API后页面无输出，请问代码写法是否正确，该如何解决？

存在的问题 #

• 表格列数不匹配：表头定义了6列，但是map循环渲染行时只输出了5个单元格，缺少ACTIVE列对应的<td>，导致表格结构异常，内容无法正常渲染。
• 字段逻辑缺失：接口返回的regional条目无直接的active字段，需要通过已有字段手动计算活跃病例数。
• 类名拼写错误：外层容器类名写为conatiner-fluid，正确拼写为container-fluid，如果使用Bootstrap等样式库会导致布局异常，内容不可见。
• 缺少请求错误处理：fetch请求未捕获异常，接口请求失败时无法定位问题。

修正后的代码 #

import React,{useState,useEffect} from 'react';
import "../Track.css";

const Tracker = () => {
    const[data,setData]= useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    const getCovidData = async() =>{
        try {
            setLoading(true);
            const res = await fetch('https://api.rootnet.in/covid19-in/stats/latest');
            if(!res.ok) throw new Error('接口请求失败');
            const actualData = await res.json();
            console.log(actualData.regional);
            setData(actualData.regional);
            setError(null);
        } catch (err) {
            setError(err.message);
            console.error(err);
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => {
        getCovidData();
    }, []);

    if(loading) return <div className="text-center mt-5">数据加载中...</div>
    if(error) return <div className="text-center mt-5 text-danger">加载失败：{error}</div>

    return (
        <>
         <div className="container-fluid mt-5">
             <div className="main-heading">
              <h1 className="mb-5 text-center"> <span className="font-weight-bold">INDIA</span> COVID-19 DASHBOARD</h1>
             </div>
  
            <div className="table-responsive">
                <table className="table table-hover">
                    <thead className="thead-dark">
                        <tr>
                            <th> STATE</th>
                            <th> CONFIRMED</th>
                            <th> RECOVERED</th>
                            <th> DEATHS</th>
                            <th> ACTIVE</th>
                            <th> UPDATED</th>
                        </tr>
                    </thead> 
                    <tbody>
                        {
                            data.map((curElem,ind) => {
                                // 计算活跃病例数
                                const active = curElem.confirmedCasesIndian + curElem.confirmedCasesForeign - curElem.discharged - curElem.deaths;
                                return(
                                <tr key={ind}>
                                    <th> {curElem.loc} </th>
                                    <td> {curElem.confirmedCasesIndian} </td>
                                    <td> {curElem.discharged} </td>
                                    <td> {curElem.deaths} </td>
                                    <td> {active} </td>
                                    <td> {curElem.lastOriginUpdate} </td>
                                </tr>
                                )
                            })
                        }    
                    </tbody> 
                </table> 
            </div>
         </div>   
        </>
    )
}

export default Tracker

修正说明 #

1. 补全了表格列，新增了ACTIVE列的<td>，匹配表头结构
2. 新增活跃病例计算逻辑，正确展示ACTIVE字段
3. 修正了container类名拼写错误
4. 新增加载状态、错误状态处理，方便定位请求层问题
5. 移除了不必要的可选链操作符，接口返回字段固定的情况下不需要额外判断

内容的提问来源于stack exchange，提问作者33_KAWALE SUSHANT