how can I fix this error in my react native, see the code below.

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.

   const getData = () => {
        setIsLoading(true)
        axios.get(hosturl.loaduser   userlist.user_id   '&page='  currentPage)
        .then((response) => {
            setEvent([...userData, ...response.data.data])
            setIsLoading(false)
        })
    }
  
    useEffect(() => {    
        getData();
    }, [currentPage]);

I did something like this see below but error keep showing.

useEffect(() => {   
    let isMounted = true;    
    if (isMounted) getData();    
    return () => { isMounted = false }; 
}, [currentPage]);

CodePudding user response：

You could use axios Cancellation:

const controller = new AbortController();

const getData = () => {
   setIsLoading(true)
   axios.get(hosturl.loaduser   userlist.user_id   '&page='  currentPage, {
    signal: controller.signal
   }).then((response) => {
       setEvent([...userData, ...response.data.data])
       setIsLoading(false)
    })
}
  
 useEffect(() => {    
    getData();
    
    return () => {
        controller.abort();
    };
 }, [currentPage]);

In this way you are aborting axios get on component unmount, avoiding setEvent and setIsLoading (and then the warning).

CodePudding user response：

function MyComponent() {
    const mounted = useRef(false);

    const getData = () => {
      setIsLoading(true)
      axios.get(hosturl.loaduser   userlist.user_id   '&page='  currentPage)
        .then((response) => {
          if (mounted.current) {
            setEvent([...userData, ...response.data.data])
            setIsLoading(false)
          }
        })
     }

    useEffect(() => {
        mounted.current = true;
        return () => {
            mounted.current = false;
        };
    }, []);

    useEffect(() => {     
      if (mounted.current) {
        getData();    
      }
    }, [currentPage]);

    return (
        ...
    );
}

The useEffect() hook, which should handle the mounted ref, is called when the component is mounted and sets the mutable mounted.current value to true. The return function from the useEffect() hook is called when the component is unmounted and sets the mounted.current value to false.

After that you can use the mounted ref (it's like a member variable in old style class components). I.e to get your data, only if your component is mounted, or set state in callback, only if component is mounted.