警告：無法對未安裝的組件執行 React state 更新。 這是一個空操作，但它表明您的應用程序中存在 memory 泄漏

Question

我正在嘗試制作一個反應應用程序，其中我通過 API 獲取數據，它可以正常工作幾秒鍾，然后我得到一個空白屏幕和控制台中的錯誤，如下所示：

控制台：這是瀏覽器控制台錯誤

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 ：這是我執行所有操作的組件

 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 ：這是我的應用程序，我在其中渲染我的 CountryWise.js 組件

 import React from "react"; import CountryWise from "./components/countryWiseData/Countrywise"; function App() { return <CountryWise />; } export default App;

index.js ：這是我在其中呈現 App 組件的 index.js 文件

Answer 1

用此代碼替換getCovidData()

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