时间戳

首页 > 解决方案 > 在我的应用程序中设置状态时如何修复内存泄漏

javascript - 在我的应用程序中设置状态时如何修复内存泄漏

问题描述

我目前正在开发一个音乐应用程序，并且在离开详细信息页面时遇到内存泄漏错误消息。

当我使用后退按钮导航回我的主页时，我在控制台中收到此错误消息。

index.js:1 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.

我该如何解决？过去在使用 React 时，我不必处理任何代码清理。

ConcertDetails.js

import React, { useState, useEffect } from 'react';
import axios from '../utils/API';

const ConcertDetails = (Props) => {

  const [details, setDetails] = useState({});
  const [songs, setSongs] = useState([]);

  useEffect(() => {
    const url = '/concerts/' + Props.match.params.id.toString() + '/';

    const getDetails = async () => {
      const response = await axios.get(url, {}, {'Content-Type': 'application/json'});
      setDetails(response.data);
      setSongs(response.data.song);
    };
    getDetails();
  });

  const getSongs = () => {
    return songs.map((song) => (
      <li key={song.title}>{song.title}</li>
    ));
  }

  return (
    <>
      <h1>Concert Details</h1>
      <p>Venue: {details.venue}</p>
      <p>Date: {details.date}</p>
      <ul>
        {getSongs()}
      </ul>
    </>
  )
}

export default ConcertDetails;

应用程序.js

import React from 'react';
import './App.css';
import NavBar from "./components/Navbar";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from './pages';
import About from './pages/about';
import Contact from './pages/contact';
import SignUp from './pages/signup';
import SignIn from './pages/signin';
import ConcertDetails from './pages/concertDetails';

function App() {
  return (
    <Router>
      <NavBar />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/signin" component={SignIn} />
        <Route path="/signup" component={SignUp} />
        <Route path="/concert/:id" component={ConcertDetails} />
      </Switch>
    </Router>
  );
}

export default App;

标签： javascriptreactjsmemory-leaks

解决方案

您只想在第一个组件渲染时运行 useEffect。添加[]为 useEffect 的第二个参数。

useEffect(() => {
    const url = '/concerts/' + Props.match.params.id.toString() + '/';

    const getDetails = async () => {
      const response = await axios.get(url, {}, {'Content-Type': 'application/json'});
      setDetails(response.data);
      setSongs(response.data.song);
    };
    getDetails();
  }, []);

没有第二个参数。每次更改状态/道具时都会运行效果。由于效果会改变状态，这可能会导致无限循环。

推荐阅读