无法使用 clearTimeout 停止 setTimeout 函数，因为由于某种原因值为空

Question

在我的 react-native 应用程序中，我试图使用 clearTimeout 停止 setTimeout。我将 setTimeout 的实例保存在全局变量中。

let timeoutId:any = null;

    const doOtp = ()=>{
        if(canSendOtp) {
            setCanSendOtp(false);

            timeoutId = setTimeout(() => { // it has here a numeric value
                showNotificationMessage("You can request OTP again")
                setCanSendOtp(true)
            }, SEND_OTP_TIME_CONSTRAINTS)

           // rest of doOtp logic
        }
        else {
            showNotificationMessage("Please wait " + (SEND_OTP_TIME_CONSTRAINTS / 1000) + " seconds before trying again")
        }
    }

然后当我想使用clearTimeout 停止setTimeout 时，我看到timeoutId 的值是null。我不明白为什么会这样。

const doLogin = () => {
issueToken(LOGIN_GRANT_TYPE, LOGIN_CLIENT_ID, LOGIN_CLIENT_SECRET, phoneNumber, otp)
    .then(res => { 
        
        console.log('timeoutId !== null' + timeoutId !== null)
        if(timeoutId !== null) { // value here is null - why?
            clearTimeout(timeoutId)
        }

        store().dispatch(setTokenValidity(res))
    })
    .catch(err => {
        showNotificationMessage('Error, something went wrong check logs.')
        console.log("issueToken error: " + JSON.stringify(err))
    });

}

Answer 1

问题

setCanSendOtp(true) 更新您的状态，再次将您的超时初始化为 null。

解决方案

将你的超时时间放在参考文献中。 Ref 值在 re-renders 和 state-updates 中保持不变。

const timeoutId:any = React.useRef(null);

const doOtp = ()=>{
        if(canSendOtp) {
            setCanSendOtp(false);

            timeoutId.current = setTimeout(() => { // it has here a numeric value
                showNotificationMessage("You can request OTP again")
                setCanSendOtp(true)
            }, SEND_OTP_TIME_CONSTRAINTS)

           // rest of doOtp logic
        }
        else {
            showNotificationMessage("Please wait " + (SEND_OTP_TIME_CONSTRAINTS / 1000) + " seconds before trying again")
        }
    }

const doLogin = () => {
issueToken(LOGIN_GRANT_TYPE, LOGIN_CLIENT_ID, LOGIN_CLIENT_SECRET, phoneNumber, otp)
    .then(res => { 
        
        if(timeoutId.current !== null) {
            clearTimeout(timeoutId.current)
        }

        store().dispatch(setTokenValidity(res))
    })
    .catch(err => {
        showNotificationMessage('Error, something went wrong check logs.')
        console.log("issueToken error: " + JSON.stringify(err))
    });

无法使用 clearTimeout 停止 setTimeout 函数，因为由于某种原因值为空

Cannot stop setTimeout function using clearTimeout because value is null for some reason

javascript

typescript

settimeout

cleartimeout

问题

解决方案