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

夾尾巴

不知道甚麼端的工程師,低薪努力中

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *