1

Tengo el siguiente problema con mi app hecha en React.

Tengo un component (Component1) el cual en su ciclo de vida componentDidMount hace un fetch a una api la cual con el response actualiza el state de ese mismo componente, todo esto bajo una llamada async usando promises. Resulta que al hacer render del componente de nombre Component1 se ejecutaba el fetch pero la promise no ah sido resuelta aun, en ese momento hago render de otro componente (Component2, cambio de pagina) desmontando el Component1. Todo bien hasta ahí.

Pero en mi consola del browser tengo un warning que me indica que debo eliminar la subscripcion de las llamadas async

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 the componentWillUnmount method.

Código de ejemplo:

componentDidMount () {
this.setState({ isLoading: true })

window.fetch(URL_FETCH).then((response) => {
  if (response.ok) {
    response.json().then(jsonStr => {
      const { datum } = jsonStr
      setTimeout(() => {
        this.setState({monitoring: datum, isLoading: false})
      }, 1000)
    })
  } else {
    console.log('Respuesta de red OK.')
    this.setState({monitoring: [], isLoading: false, isError: true})
  }
})
  .catch((error) => {
    console.log('Hubo un problema con la petición Fetch:' + error.message)
    this.setState({monitoring: [], isLoading: false, isError: true})
  })
}

¿Como puedo resolver mi problema?

...Ok ! Esta bien, el setTimeout esta resuelto. Solo persiste el problema para abortar el this.setState()

2 respuestas 2

0

Perfecto !

El problema lo resolví de la siguiente forma.

Dentro de mi clase y antes de mi componentDidMount cree una instancia de la api AbortController de la siguiente forma.

abortController = new AbortController()

Despues a mi fetch le pase un nuevo parametro en la llamada.

window.fetch(MI_URL, { signal: this.abortController.signal }).then.....

Finalmente en el ciclo de vida del desmontado (componentWillUnmount) use lo siguiente.

this.abortController.abort()

Dejo el código completo a continuación.

abortController = new AbortController()

componentDidMount () {
this.setState({ isLoading: true })

window.fetch(MI_URL, { signal: this.abortController.signal }).then((response) => {
  if (response.ok) {
    response.json().then(jsonStr => {
      const { datum } = jsonStr
      this.timeOut = setTimeout(() => {
        this.setState({monitoring: datum, isLoading: false})
      }, 1000)
    })
  } else {
    console.log('Respuesta de red OK.')
    this.setState({monitoring: [], isLoading: false, isError: true})
  }
})
  .catch((error) => {
    console.log('Hubo un problema con la petición Fetch:' + error.message)
    this.setState({monitoring: [], isLoading: false, isError: true})
  })
}

componentWillUnmount() {
  this.abortController.abort()
}

Espero que ah alguien más le pueda servir esto ! (:

PD: Una vez cancelado el TimeOut no deberia haber problemas con el this.setState() en caso contrario usar la api de AbortController

0

Puedes usar la API de AbortController https://developers.google.com/web/updates/2017/09/abortable-fetch

this.abortController = new AbortController();

componentDidMount() {
  fetch(URL_FETCH, { signal: this.abortController.signal }) // Pasas signal como segundo parámetro
  ...
}

// En componentWillUnmount llamas al método abort() del AbortController
componentWillUnmount() {
  this.abortController.abort();
}
1
  • Es la misma respuesta que di a mi pregunta.
    – vicasas
    el 14 ago. 2019 a las 12:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.