'Warning: Can't perform a React state update on an unmounted component, no-op, but it indicates a memory leak in your application

I fetch the data from api (in localhost:4001/) and i got the data in my console but it is not listing and it shows 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. " and also shows another error " Category.js:59 Uncaught TypeError: category.map is not a function".

This is my code. //enter code here

  import React, { useEffect, useState } from "react";
  import axios from "axios";

  function Category() { 
     const [category , setCategory]=useState([]);

     const getCategoryData= async () =>{
         try{
           const data= await axios.get("http://localhost:4001/category");
           console.log(data.data);
           setCategory(data.data); 
            }
    catch(e){
           console.log(e);
            }  
         }

     useEffect(() =>{
         let isCancelled = false;
          getCategoryData();

       return () => {
         isCancelled = true;
         };

      } ,[]);

   return(
    <>
  
      <h2 style={{textAlign:"center"}}>Category List</h2>
         {category.map((item)=>{
                  return <p>{item.id}-{item.category_name}</p>
                })}
  
      </>
     );
   }

 export default Category;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source