0

I am trying to make a react app in which I am fetching data through API which works fine for a few seconds and then I get a blank screen and an error in the console which is as follows:

Console : This is the browser console error

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

CountryWise.js : This is my component where i am performing all the operations

import React, { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

const CountryWise = () => {
  const [data, setData] = useState([]);
  const [name, setName] = useState("pakistan");
  const getCovidData = async () => {
    const res = await fetch(
      `https://api.covid19api.com/live/country/${name}/status/confirmed`
    );
    const actualData = await res.json();
    setData(actualData);
  };

  getCovidData();

  return (
    <>
      <div className="container-fluid mt-5">
        <div className="main-heading">
          <h1 className="mb-5 text-center">Covid-19 Tracker</h1>
          <br />
          <select
            value={name}
            onChange={(event) => {
              setName(event.target.value);
            }}
          >
            <option value="pakistan">Pakistan</option>
            <option value="afghanistan">Afghanistan</option>
          </select>
        </div>

        <div className="table-responsive">
          <table className="table table-hover">
            <thead className="table-dark">
              <tr>
                <th>Country</th>
                <th>Date</th>
                <th>Active Cases</th>
                <th>Confirmed Cases</th>
                <th>Deaths</th>
                <th>Recovered</th>
              </tr>
            </thead>
            <tbody>
              {data.map((curElm, ind) => {
                return (
                  <tr key={ind}>
                    <th>{curElm.Country}</th>
                    <td>{curElm.Date}</td>
                    <td>{curElm.Active}</td>
                    <td>{curElm.Confirmed}</td>
                    <td>{curElm.Deaths}</td>
                    <td>{curElm.Recovered}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
};

export default CountryWise;

App.js : This is my app where i am rendering my CountryWise.js component

import React from "react";
import CountryWise from "./components/countryWiseData/Countrywise";

function App() {
  return <CountryWise />;
}

export default App;

index.js : Here is my index.js file where i am rendering App component

M Ishtiaq
  • 13
  • 1
  • 4
  • You're going to get an infinite loop, because each time you call `getCovidData();` you call `getCovidData` which causes `CountryWise` to run its body again, which then causes `getCovidData()` to be called, etc. When your component unmounts, your fetch is still occuring in the background, and when it completes, `setData()` is called even though your component has already unmounted – Nick Parsons Apr 06 '22 at 12:05

1 Answers1

0

Replace getCovidData() with this Code

 useEffect(() => {
            getCovidData()
        }, [name])
Steve Bosman
  • 2,599
  • 1
  • 25
  • 41
Raza Akmal
  • 28
  • 4