Estoy escribiendo un componente React donde obtengo datos de una API y luego actualizo el componente con estados, pero por alguna razón siempre recibo este error:
Advertencia: no se puede realizar una actualización de estado de React en un componente desmontado. Esto no es operativo, pero indica una pérdida de memoria en su aplicación. Para solucionarlo, cancele todas las suscripciones y tareas asincrónicas en una función de limpieza useEffect. en CollectionContainer (http://localhost:3000/static/js/bundle.js:1632:102)
Intenté soluciones a preguntas similares pero nada funcionó, tengan paciencia conmigo, soy nuevo en React
Código
import React from "react"; import { useState } from "react"; function CollectionContainer(props) { //STATE const [FilesAPIfetched, setFilesAPIfetched] = useState(false); function RefreshDataDatasets() { console.log("Refreshed collections data"); setFilesAPIfetched(true); } const files = ["test"]; const COLLECTION_ID = props.children.id; //API CALL let API_CALL_FILES = `http://xxx.yyy/${COLLECTION_ID}/files/`; fetch(API_CALL_FILES) .then((res) => res.json()) //.then((data) => console.log(data)); .then((data) => { for (let i = 0; i < data.length; i++) { files[i] = data[i]; } console.log(files); RefreshDataDatasets(); });Puede usar Effect Hook para llamar a la solicitud de API después de la representación de la página. Effect Hook es similar a ComponentDidMount y componentDidUpdate cuando construyes componentes de clase en React, pero cuando usas componentes funcionales, necesitas usar Effect Hook.
const getApiData = () => { // API CALL } useEffect(() => { getApiData(); });