iT邦幫忙

0

ReactJS useEffect中取state值問題

  • 分享至 

  • xImage

大家好,請問以下程式碼

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

上面我是想在input Enter時更改curData值,但我發現在console.log(curData)那邊永遠都是A,但state確實有被更動為B,想請教為什麼以及怎麼解決這種問題呢?

感謝~

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
listennn08
iT邦高手 5 級 ‧ 2020-11-13 11:11:06
最佳解答
React.useEffect(() => {
    let input = document.getElementById("input");
    input.addEventListener("keyup", handlerInput);
    return () =>{
        document.removeEventListener("keyup", handlerInput);
    }
}, [curData])

在 useEffect 後面的 array 加上 curData
不然 useEffect 只會在初始的時候觸發

看更多先前的回應...收起先前的回應...
gary11159 iT邦新手 5 級 ‧ 2020-11-13 11:13:05 檢舉

但是這樣是不是會產生很多監聽。

gary11159
所以你要使用另外一個 useEffect 來管理 curData 的變更狀態
這樣你應該是要把 console.log(curData)
搬到新的 useEffect

useEffect(() => {
  console.log(curData);
}, [curData]);

會更建議你把事件監聽的部分直接搬到 jsx 寫

咖咖拉 iT邦好手 1 級 ‧ 2020-11-13 12:10:34 檢舉

可以用 看看

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

把useEffect 都遮掉

gary11159 iT邦新手 5 級 ‧ 2020-11-13 13:28:57 檢舉

感謝兩位的幫助,已經順利達到我的目標/images/emoticon/emoticon12.gif

我要發表回答

立即登入回答