Actualmente estoy trabajando en una aplicación de música y recibo un mensaje de error de pérdida de memoria cuando salgo de la página de detalles.
Cuando uso el botón Atrás para volver a mi página de inicio, aparece este mensaje de error en la consola.
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.¿Cómo puedo solucionar esto? No he tenido que lidiar con ninguna limpieza de código en el pasado mientras trabajaba con 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;Aplicación.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;Desea ejecutar useEffect solo en el renderizado del primer componente. Agregue [] como el segundo parámetro de 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(); }, []);sin el segundo parámetro. el efecto se ejecutará cada vez que se cambie el estado/props. Dado que el efecto cambia el estado, esto puede causar un bucle infinito.
Compruebe el plnkr: CodeSanbox: https://codesandbox.io/s/suspicious-dew-rsz5s?file=/src/App.js
La explicación:
Hay múltiples problemas, vamos a resolver paso a paso
useEffect se ejecuta varias veces, tenemos que definir una condición con la matriz de dependencias, definiré que solo se ejecuta en el montaje con dependencias vacías.setState está tratando de establecer el estado después de una llamada asíncrona. Entonces, quizás en ese momento, el componente ya esté desmontado. Por esa razón, debe ejecutar un safeSetState :). Básicamente, debe validar antes de setState.Primero, definiremos nuestra validación de enlace de montaje/desmontaje:
useSafeWrite.js:
import React from 'react'; function useSafeWrite(dispatch) { const mounted = React.useRef(false) React.useLayoutEffect(() => { mounted.current = true return () => (mounted.current = false) }, []) return React.useCallback( (...args) => (mounted.current ? dispatch(...args) : void 0), [dispatch], ) } export default useSafeWrite; Y después de eso, redefiniremos setDetails y setSongs con nuestro gancho y los usaremos dentro de nuestro useEffect .
ConciertoDetalles
const [details, setDetails] = useState({}); const [songs, setSongs] = useState([]); const safeSetDetails = useSafeWrite(setDetails); const safeSetSongs = useSafeWrite(setSongs); useEffect(() => { const getDetails = async () => { const url = '/concerts/' + Props.match.params.id.toString() + '/'; const response = await axios.get(url, {}, {'Content-Type': 'application/json'}); safeSetDetails(response.data); safeSetSongs(response.data.song ); }; getDetails(); }, [safeSetDetails, safeSetSongs]);CodeSanbox: https://codesandbox.io/s/suspicious-dew-rsz5s?file=/src/App.js