Cuando presiono una tecla usando keyEvent, llamo a la función, está debajo.
const GeneratedKey: FC<IGenerated> = (props) => { const [keyBoard, setKeyBoard] = useState("") const [arrayMovie, setArrayMovie] = useState<string[]>([]) const idPage = props.idpage const nameMovie = data.results[idPage].title const [idLetter, setIdLetter] = useState<number>(0) const [indexArray, setIndexArray] = useState<number[]>([]) const arrayNameMovie = nameMovie.split(" ").join("").split(""); const getKey = (e: any) => { console.log("test") const key = e.key let count = 0 for (let i = 65; i <= 90; i++) { if (key.toUpperCase() == String.fromCharCode(i)) { count = 1 } else if (key.toLowerCase() == "backspace") { count = 10 } } if (count == 1) { indexArray.sort(function (a: any, b: any) { return a - b; }) arrayMovie.splice(indexArray[idLetter], 1, key) setIdLetter(idLetter + 1) } else if (count == 10) { if (idLetter >= 1) { setIdLetter(idLetter - 1) arrayMovie.splice(indexArray[idLetter], 1, "") } } setKeyBoard(key) document.removeEventListener("keydown", getKey); } useEffect(() => { for (let i = 3; i >= 0; i--) { const randomIndex = Math.floor(Math.random() * arrayNameMovie.length) arrayNameMovie.splice(randomIndex, 1, " ") indexArray.push(randomIndex) } setIdLetter(indexArray[0]) setArrayMovie(arrayNameMovie) }, []) document.addEventListener("keydown", getKey) return ( <div className="down__word"> {arrayMovie.map((letter: any) => <LettersView letters={letter} props={undefined} /> )} </div> ) } De hecho, debería llamarse una vez, pero se dispara dos veces, como puede ver en console.log(); ¿Cómo puedo solucionar esto? También puedo mostrar otros archivos con código, pero es poco probable que esto ayude
Esto se debe a que su componente puede renderizarse dos veces (debido al cambio de accesorios o cualquier razón externa). Además, creo que esta no es la forma correcta de manejar el detector de eventos en FC. Debe considerar el useEffect para el registro/cancelación del registro del detector de eventos.
useEffect(() => { const handler = () => {}; document.addEventListener('keydown', handler); return () => { document.removeEventListener('keydown', handler); } }, [deps]); // if you have any changing dependency else just remove the array to execute the UseEffect everytime.Esto asegurará que haya registrado el evento solo una vez en su código.