Estoy tratando de voltear una tarjeta en la barra espaciadora. Da la vuelta una vez pero no da la vuelta. Estoy volteando la tarjeta a través de un controlador de eventos useState y JS keydown verdadero, falso. Tengo un ejemplo a continuación que recrea el mismo problema sin toda la otra jerga en mi código original. Cambia a "verdadero" de falso después de presionar el espacio como se esperaba. Sin embargo, no vuelve a cambiar.
¿Debería estar haciendo esto de manera diferente? ¿Cómo haría usted para esto?
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>Puedes hacerlo:
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>; } Básicamente, le paso toda la lógica al useEffect , por lo que no tiene ninguna dependencia. También agregue este setIsOn((prevState) => !prevState); , esta es la mejor forma de actualizar el valor opuesto del estado.
Algunos enlaces para explicar: https://stackoverflow.com/a/48394541/12816782
La razón por la que no funciona es porque está intentando obtener el estado actualizado dentro de la función que se llama desde document.addEventListener. la función que se llama desde document.addEventListener nunca obtiene el estado actualizado, por lo que cada vez que el valor de isOn es falso dentro de la función onFlip. Puede utilizar la funcionalidad useRef para lograr su requisito.
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>He agregado la siguiente línea a su código
Debe poner isOn en las dependencias de useEffect. el detector de eventos de registro debe anular el registro / registrarse cada vez que se cambia isOn, porque isOn utilizado en la función onFlip debe actualizarse. Prueba esto:
useEffect(() => { SetIsOn(false); }, []); useEffect(() => { document.addEventListener("keydown", handleKeyPress); return () => document.removeEventListener("keydown", handleKeyPress); }, [isOn]);