Блог

По сути, я извлекаю данные covid 19 из API в компоненте с именем covid_update, я передаю данные из api в другой компонент с именем Tables, но когда я печатаю console .log(props) в usestate таблиц, тогда он не показывает никаких данных.

Я не знаю, где ошибка в коде. когда я печатаю входящие данные в компоненте Tables, я получаю этот ответ в консоли {data: «{}»}

 import React, { useEffect, useState } from 'react';
import Navbar from '../Home/Header/Header';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from '../Home/Header/Header';
import { Button, Card, Col, Container, Row, Spinner, Table } from 'react-bootstrap';
import Chart from "react-google-charts";
import Trackers from './Trackers';
import Charts from './Charts';
import Tables from './Tables';
import Carousels from './Carousels';
import Axios from 'axios';
import './Covid_Update.css';


function Covid_Update() {

  const [state_data,set_state_data]=React.useState({});
  useEffect(() => {

    Axios.get("https://api.covid19india.org/data.json").then(function (val) {
    const res=val.data;
    set_state_data(res);
   
  })

  
  },[])


  return (
    <>
     { 
      state_data==null?<Container id="load"><center><Spinner animation="grow" variant="dark" size="100" /></center></Container>:<div>
      <Tables data={JSON.stringify(state_data)} />
      </div>
            }

    </>
  );
}
export default Covid_Update;


 

 import React, { useEffect, useState } from 'react';
import Carousel from 'react-bootstrap/Carousel';
import Navbar from '../Home/Header/Header';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from '../Home/Header/Header';
import { Button, Card, Col, Container, Row, Table } from 'react-bootstrap';
import Chart from "react-google-charts";


function Tables(props) {

  useEffect(()=>{
   console.log(props);
  },[])  


  return (<Container className="mt-5">
    <Table striped bordered hover size="sm">
  <thead>
    <tr>
      <th>State/UT</th>
      <th>Infected</th>
      <th>Recovered</th>
      <th>Death</th>
    </tr>
  </thead>
  <tbody>
    {/* {
        this.props.data["statewise"].map((item)=>{
        return <>
        <tr>
      <td>{item["state"]}</td>
      <td>{item["confirmed"]}</td>
      <td>{item["recovered"]}</td>
      <td>{item["deaths"]}</td>
    </tr>
        </>    
        })
    } */}
    <tr>
      <td>MAHARASHTRA</td>
      <td>40</td>
      <td>51</td>
      <td>1</td>
    </tr>
    <tr>
      <td>KERALA</td>
      <td>40</td>
      <td>51</td>
      <td>1</td>
    </tr>
    <tr>
      <td>UTTAR PRADESH</td>
      <td>40</td>
      <td>51</td>
      <td>1</td>
    </tr>
    <tr>
      <td>DELHI</td>
      <td>40</td>
      <td>51</td>
      <td>1</td>
    </tr>
  </tbody>
</Table>
  </Container>);
}

export default Tables;


 

Пожалуйста, помогите мне!!

Вы используете свободную проверку равенства ( == ) для условного отображения данных. Поступая так, если данные были null или undefined они все равно отображали бы истинный регистр, который в данном случае является загрузчиком. Если данные не были установлены, и вы попытаетесь использовать значение из set_data него, оно вернет undefined.

 null == null
// returns true
 

 undefined == null
// returns true
 

Вместо этого вы можете сделать следующее: если данные не были заданы, вы визуализируете загрузчик, в противном случае вы визуализируете таблицу с данными JSON из API.

 !state_data ? (
    <Container id="load">
      <center>
        <Spinner animation="grow" variant="dark" size="100" />
     </center>
    </Container> ) : ( 
    <div>
      <Tables data={JSON.stringify(state_data)} />
   </div> )
 

Или наоборот, где, если данные были установлены, затем отобразите данные в табличной форме, иначе отобразите загрузчик

 state_data ? (
    <div>
      <Tables data={JSON.stringify(state_data)} />
   </div> ) : (
  <Container id="load">
      <center>
        <Spinner animation="grow" variant="dark" size="100" />
     </center>
  </Container>