React 使用useEffect不當 有趣的範例 按鍵事件

今天在網路上看到有人問這問題

const [curData, setCurData] = React.useState('A');
    // 處理輸入
    React.useEffect(() => {
        let input = document.getElementById("input");
        input.addEventListener("keyup", handlerInput);
        return () =>{
            document.removeEventListener("keyup", handlerInput);
        }
    }, [])
    function handlerInput(event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            console.log(curData);
            if (curData === 'A') {
                setCurData('B');
            } else if (curData === 'B') {
                setCurData('A');
            }
        }
    }

console.log(curData); 一直輸出A 無法ABAB的取值

因為useEffect有給偵測的參數，所以只會促發一次，input的數值只會取道第一次的A
所以只要把useEffect的觸發參數移除或偵測curData

const [curData, setCurData] = React.useState('A');
    // 處理輸入
    React.useEffect(() => {
        let input = document.getElementById("input");
        input.addEventListener("keyup", handlerInput);
        return () =>{
            document.removeEventListener("keyup", handlerInput);
        }
    })
    function handlerInput(event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            console.log(curData);
            if (curData === 'A') {
                setCurData('B');
            } else if (curData === 'B') {
                setCurData('A');
            }
        }
    }

但這樣寫卻會出現一個大問題，應該是因為出現這個問題他才會跑上來問。

只要手賤，案太快它就會當機，一直無限循環ABABABABABABAB

react 真好玩，直接把記憶體用到滿。


解決方式 不用useEffect來寫偵測，直接寫在JSX裡面

<input id="input" value={curData} onKeyDown={handlerInput} />