警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏

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 ：这是我的 index.js 文件，我在其中渲染 App 组件

Answer 1

有一个名为 useIsMounted 的相当常见的钩子解决了这个问题（对于功能组件）...

import { useRef, useEffect } from 'react';

export function useIsMounted() {
  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;
    return () => isMounted.current = false;
  }, []);

  return isMounted;
}

然后在你的功能组件中

function Book() {
  const isMounted = useIsMounted();
  ...

  useEffect(() => {
    asyncOperation().then(data => {
      if (isMounted.current) { setState(data); }
    })
  });
  ...
}

useIsMounted 只会让您将 state 组件从 DOM 更改为 unmounted 之前的 state。

Answer 2

用这个代码替换getCovidData()

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

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏

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

javascript

reactjs

react-hooks