How do I switch states(useState) through key event listeners (ReactJS)-CodePudding

I am trying to flip a card on space bar. It flips once but does not flip back. I'm flipping the card through a true, false useState and JS keydown event handler. I have an example below that recreates the same problem without all of the other jargon in my original code. It changes to "true" from false after I press space as intended. However, it does not switch back.

Should I be doing this differently? How would you go about this?

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

    export const Test = () => {
      const [isOn, SetIsOn] = useState(false);

      const handleKeyPress = (e) => {
        if (e.key === " ") {
          console.log(isOn);
          onFlip();
        }
      };

      const onFlip = () => {
        SetIsOn(!isOn);
      };

      useEffect(() => {
        SetIsOn(false);
        document.addEventListener("keydown", handleKeyPress);
        return () => document.removeEventListener("keydown", handleKeyPress);
      }, []);
      return <p>{isOn.toString()}</p>;
    };


<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

CodePudding user response：

Why its not working is because you are trying to get the updated state inside the function which is called from document.addEventListener. the function that gets called from document.addEventListener never gets the updated state so every time value of isOn is false inside onFlip function. You can use the useRef functionality to achieve your requirement.

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

export const Test = () => {
  const [isOn, SetIsOn] = useState(false);
  const isOnRef = useRef(false);

  const handleKeyPress = (e) => {
    if (e.key === " ") {
      console.log(isOn);
      onFlip();
    }
  };

  const onFlip = () => {
    isOnRef.current = !isOnRef.current;
    SetIsOn(!isOnRef.current);
};

  useEffect(() => {
    SetIsOn(false);
    document.addEventListener("keydown", handleKeyPress);
    return () => document.removeEventListener("keydown", handleKeyPress);
  }, []);
  return <p>{isOn.toString()}</p>;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I have added the following line to your code

const isOnRef = useRef(false);
changed the onFlip function.

CodePudding user response：

You can do this:

import { useEffect, useState } from "react";

export default function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    const handleKeyPress = (e) => {
      if (e.key === " ") {
        setIsOn((prevState) => !prevState);
      }
    };

    document.addEventListener("keydown", handleKeyPress);
    return () => document.removeEventListener("keydown", handleKeyPress);
  }, []);

  return <p>{isOn.toString()}</p>;
}

Basically, I pass all the logic to the useEffect, so he don't have any dependency. Also have add this setIsOn((prevState) => !prevState);, this is the best away to update the opposite value of the state.

Some links to explain: https://stackoverflow.com/a/48394541/12816782

CodePudding user response：

You should put isOn on useEffect's dependencies. register event listener should be unregiste / register each time isOn is changed, because isOn used on function onFlip need to up to date. Try this:

useEffect(() => {
    SetIsOn(false);
}, []);

useEffect(() => {
    document.addEventListener("keydown", handleKeyPress);
    return () => document.removeEventListener("keydown", handleKeyPress);
}, [isOn]);