'Can't avoid re-render while fetching data with async with useState
`import React, { useState, useEffect } from 'react'; import { Container } from 'react-bootstrap';
import "regenerator-runtime/runtime"; import { CovidTable } from './CovidTable';
export const Covid = () => {
const [covidData, setCovidData] = useState([]);
useEffect(() => {
gettingData();
}, []);
const gettingData = async () => {
const newUrl = 'https://api.covid19api.com/live/country/uruguay';
const newResp = await fetch(newUrl);
const theResp = await newResp.json();
console.log(theResp);
const covidArray2 = [
[[theResp[0].Active], [theResp[1].Active], [theResp[2].Active], [theResp[3].Active], [theResp[4].Active]],
[[theResp[0].Confirmed], [theResp[1].Confirmed], [theResp[2].Confirmed], [theResp[3].Confirmed], [theResp[4].Confirmed]],
[[theResp[0].Deaths], [theResp[1].Deaths], [theResp[2].Deaths], [theResp[3].Deaths], [theResp[4].Deaths]],
[[theResp[0].Recovered], [theResp[1].Recovered], [theResp[2].Recovered], [theResp[3].Recovered], [theResp[4].Recovered]],
];
setCovidData(covidArray2);
}
return (<>
{covidData.map((covidArray2) => (
<Container style={{ minHeight: 'calc(100vh 0)' }}>
<CovidTable
Active1={covidArray2[0][0]}
Active2={covidArray2[0][1]}
Active3={covidArray2[0][2]}
Active4={covidArray2[0][3]}
Active5={covidArray2[0][4]}
Confirmed1={covidArray2[1][0]}
Confirmed2={covidArray2[1][1]}
Confirmed3={covidArray2[1][2]}
Confirmed4={covidArray2[1][3]}
Confirmed5={covidArray2[1][4]}
Deaths1={covidArray2[2][0]}
Deaths2={covidArray2[2][1]}
Deaths3={covidArray2[2][2]}
Deaths4={covidArray2[2][3]}
Deaths5={covidArray2[2][4]}
Recovered1={covidArray2[3][0]}
Recovered2={covidArray2[3][1]}
Recovered3={covidArray2[3][2]}
Recovered4={covidArray2[3][3]}
Recovered5={covidArray2[3][4]}
/>
</Container>))}
</>
)
} `
Thanks guys!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
