时间戳

首页 > 解决方案 > 我是否正确使用 API 做出反应？我没有得到任何输出

reactjs - 我是否正确使用 API 做出反应？我没有得到任何输出

问题描述

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

const Tracker = () => {

    const[data,setData]= useState([]);

    const getCovidData = async() =>{
         const res =    await fetch('https://api.rootnet.in/covid19-in/stats/latest');
         const actualData = await  res.json();
         console.log(actualData.regional);
         setData(actualData.regional);

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

    return (
        <>
         
         <div className="conatiner-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 && data.map((curElem,ind,regional) => {
                                return(
                                <tr key={ind}>
                                    <th> {curElem?.loc} </th>
                                    <td> {curElem?.confirmedCasesIndian} </td>
                                    <td> {curElem?.discharged} </td>
                                    <td> {curElem?.deaths} </td>
                                
                                    <td> {curElem?.lastOriginUpdate} </td>
                                </tr>
                                )
                            })
                        }    
                            
                    </tbody> 
                </table> 
            </div>

         </div>   
        </>
    )
}

export default Tracker

我没有在输出页面中获得 api 值的输出。请帮忙，因为他们可能是地图功能的错误。如果可能，请分享您的观点并分享解决方案。

标签： reactjsreact-hooks

解决方案

区域是内部数据对象。

{
  "success": true,
  "data": {
   "summary": {...}
   "unofficial-summary" : [...],
   "regional" : [...]
   ...
  }
}

您需要进行setData(actualData.regional);如下更改

// ...
const getCovidData = async() =>{
         const res =    await fetch('https://api.rootnet.in/covid19-in/stats/latest');
         const actualData = await  res.json();
         console.log(actualData.regional);
         setData(actualData.data.regional);
    
    }

推荐阅读