javascript - Updating a state variable inside of a react function

Question

I'm using the State Hook to update a Throttle setting for a robot based on keyboard commands (W,A,S,D). I have a maxThrottle state variable that ensures that the robot doesn't go too fast. However, I am using a slider to adjust the maxThrottle command. When you press the W key (forward) you should get the current maxThrottle['forward'] value assigned to the throttleCommand variable. However, every time the handleKey function runs, I just get throttleCommand['forward'] set to the initial value of 30, even if I have changed maxThrottle (using setMaxThrottle) to a higher number like 80.

function App(){

//state hooks
    const [ throttleCommand, setThrottleCommand ] = useState({ forward: 0, turn: 0 });
    const [ maxThrottle, setMaxThrottle ] = useState({ forward: 30, turn: 15 });

useEffect(
        () => {
            sendThrottle(throttleCommand);
        },
        [ throttleCommand ]
    );

    const handleKey = (e) => {
        switch (e.code) {
            case 'KeyW':
                setThrottleCommand({ ...throttleCommand, forward: maxThrottle.forward });
                break;
            case 'KeyS':
                //THIS SHOULD TURN IT OFFF
                setThrottleCommand({ forward: 0, turn: 0 });
                break;
            case 'KeyA':
                //turn left
                setThrottleCommand({ ...throttleCommand, turn: -maxThrottle.turn });
                break;
            case 'KeyD':
                setThrottleCommand({ ...throttleCommand, turn: maxThrottle.turn });
                break;
            default:
                break;
        }
    };


    const sendThrottle = () => {
        //here I test the throttleCommand
        console.log('sending command', throttleCommand);
        axios.get(`/throttle/${throttleCommand.forward}/${throttleCommand.turn}`).then((res) =>    {
            setThrottleData(res.data);
        });
    };

....

}

I have verified that I successfully update maxThrottle to {forward:80,turn:20} but when I press the W key, the throttleCommand is logged as {forward:30, turn:0}. I am expecting to see {forward:80,turn:0} assigned to throttleCommand.

Is there something wrong with using a state variable inside the handleKey function? Why am I always getting the initial value of maxThrottle assigned to throttleCommand?

Answer 1

Michael Bauer! Thanks for the fix. You are 100% correct. Code now works. here is the change:

incorrect keydown listener:

    useEffect(() => {
        document.addEventListener('keydown',handleKey);
    }, []);

SOLVED / CORRECT keydown listener

    useEffect(() => {
        document.addEventListener('keydown', (e) => {
            handleKey(e);
        });
    }, []);

Lesson learned - use arrow functions inside of useEffect so that the callback function updates!