React 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

Viewed 122

I know this question has been asked before but I'm having trouble getting it to work. I'm trying to render a graph using React by making nodes and links between different resources from an API. There are 2 input fields based on which the graph is rendered after clicking the Submit button. The first time the button is pressed, the graph is rendered properly. However when I change the input and press the button, I get the above error.

I think there needs to be some sort of a cleanup function to get rid of this error when component is unMounted. Also, I'm using state variables but I'm not using useEffect() in my code anywhere. When the submit button is pressed, I just call an asynchronous function which makes the API call.

So template code is something like

export default function App(props) {

let[nodes,setNodeDataFromAPI]=useState([])
let[links,setLinkDataFromAPI]=useState([])

let handleSubmit=(event)=>{   // method called when form is submitted
   getData()
}

async function getData() {
   graphLinks=[]
   graphNodes=[]

  //make axios call using await

  //get all data about nodes and links for the graph

  // iterate through fetched data and populate graphLinks and graphNodes arrays

   setNodeDataFromAPI(graphNodes)
   setLinkDataFromAPI(graphLinks)
}

 return(
   <Graph linksData={links} nodesData={nodes} /> 
 )

}
0 Answers
Related