ReactJS useEffect中取state值問題

javascript react reactjs 前端 useeffect

gary11159 2020-11-13 10:37:53 ‧ 2059 瀏覽

分享至

大家好，請問以下程式碼

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

直播中

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 只會在初始的時候觸發

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

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

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

listennn08 iT邦高手 5 級 ‧ 2020-11-13 11:14:17 檢舉

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 檢舉

感謝兩位的幫助，已經順利達到我的目標

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙