I am writing a React component where I fetch data from an API and then I refresh the component with states, but for some reasons I always get this error:
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. at CollectionContainer (http://localhost:3000/static/js/bundle.js:1632:102)
I tried solutions to similar questions but nothing worked, please bear with me, I'm new to React
Code
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();
});
You can use the Effect Hook to call the API request after the page renderization. Effect Hook is similar to ComponentDidMount and componentDidUpdate when you build Class Components in React, but when you use Functional Components, you need to use Effect Hook.
const getApiData = () => {
// API CALL
}
useEffect(() => {
getApiData();
});