reactjs - react js more functions in one file react unmounted

Question

i tryed to put more functions in one file so i can display 3 similar functions in one page on load theres no errors, but how i start to switch bettwen pages i got error with unmounted, i also want to say that i tryed examples with let mounted = false... but it didnt solve my problem.. In last time i have so much problems with this error is there some global examle how should i avoid this error in feature..

 export function Daily () {
  const {isLoading, error, clearError, fetchGet} = useHttpClient();
  const [getAdsDaily, setgetAdsDaily] = useState([]);

  useEffect(() => {
    const adsListHandlerDaily = (getAdsDaily) => {
      fetchGet(`http://localhost:5000/api/ads/type/1`)
      .then(responseData => {
        setgetAdsDaily(responseData.pageOfItems);
      });     
    }

    socket.on('getAdsDaily', adsListHandlerDaily);

    return () => socket.off('getAdsDaily', adsListHandlerDaily);
  }, []);

  useEffect(() => {
    socket.emit('boostdaily');
  }, []);

  return (<React.Fragment>
        <div className="container addcustomstylecont">
        <h1>Daily</h1>

        <div className="main-slidermain">

              {getAdsDaily && <AdsList4 items={getAdsDaily} />}

        </div>
        </div>
        </React.Fragment>);

}

and this is a display:

export function Home () {
  return (
    <React.Fragment>
      
      <Helmet>
      <title></title>
      </Helmet>

        {
          Daily()
        }

        <div className="space30px"></div>

        {
          Weekly()
        }

        <div className="space30px"></div>

        {
          Monthly()
        }
    </React.Fragment>
  );
};

export default Home;

this is example in one file i have plus 2 more functions like this for other types and on load everything is fine , but how i start to change pages in navigation im getting:

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.
    in Home (at App.js:46)
console.<computed> @ index.js:1
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
warnAboutUpdateOnUnmountedFiberInDEV @ react-dom.development.js:23161
scheduleUpdateOnFiber @ react-dom.development.js:21169
dispatchAction @ react-dom.development.js:15660
fetchGet @ http-hook.js:51

And this is my fetchGet function:

  const fetchGet = async (url, options) =>{
    setIsLoading(true);
    const response = await fetch(url, options)
    response && setIsLoading(false);
    return await response.json()
  }

Any idea how to solve this and improve my code?

Answer 1

等待大神答复