CODEWITHSUNDEEP
reactjsaddeventlistener
vimov32802
vimov32802

Reputation: 99

Why props is undefined inside addEventListener function in React

I have following code:

const useMousePlayerMove = ({ playerMe }: any) => { 
    console.log({playerMe}) // exist
    const handleCardMove = useCallback((event: any) => {
        console.log(playerMe); // undefined
    }, [playerMe]);

    useEffect(() => {
        window.addEventListener('mousemove', handleCardMove);
        return () => window.removeEventListener('mousemove', handleCardMove);
    }, []);

    return null;
};

There is a variable playerMe (it is object). In console.log I can see that it is really exist.

Once handleCardMove is fired, playerMe inside function is undefined.

Why?

Same without useCallback.

Upvotes: 0

Views: 612

Answers (1)

kyun
kyun

Reputation: 10264

const useMousePlayerMove = ({ playerMe }: any) => { 
    console.log({playerMe}) // exist
    const handleCardMove = useCallback((event: any) => {
        console.log(playerMe); // undefined
    }, [playerMe]);

    useEffect(() => {
        window.addEventListener('mousemove', handleCardMove);
        return () => window.removeEventListener('mousemove', handleCardMove);
    }, [hndleCardMove]); // Add dependency 

    return null;
};

Try to Add dependency on useEffect()

Upvotes: 1

Related Questions