當一個鍵被按下時，事件發生兩次

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();看到的那樣console.log(); 我該如何解決這個問題，我也可以用代碼顯示其他文件，但這不太可能有幫助

Answer 1

這是因為您的組件可能會被渲染兩次（由於道具的更改或任何外部原因）。 此外，我認為這不是在 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