当一个键被按下时，事件发生两次

Question

当我使用 keyEvent 按下一个键时，我会调用该函数，它在下面。

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>
    )
}

其实应该调用一次，但是会触发两次，从console.log();可以看到 我该如何解决这个问题，我也可以用代码显示其他文件，但这不太可能有帮助

Answer 1

这是因为您的组件可能会被渲染两次（由于 props 的更改或任何外部原因）。此外，我认为这不是在 FC 中处理事件侦听器的正确方法。您应该考虑使用useEffect 注册/取消注册事件监听器。

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.

这将确保您在代码中只注册了一次事件。

参考https://reactjs.org/docs/hooks-effect.html