3 回答

TA貢獻1765條經(jīng)驗 獲得超5個贊
問題是在每次渲染時, 的值t都會重置為 null。一旦您調(diào)用updateMessage,它將觸發(fā)重新渲染并失去它的價值。功能性反應組件內(nèi)的任何變量在每次渲染時都會重置(就像在render基于類的組件的功能內(nèi)一樣)。如果要保留引用,則需要保存tusing的值,setState以便可以調(diào)用clearInterval.
但是,另一種解決方法是承諾setTimeout. 通過使其成為承諾,您可以消除需求,t因為它在setTimeout完成之前不會解決。完成后,您可以updateMessage('')重置message. 這可以避免您在引用t.
clearLogger = () => {
return new Promise(resolve => setTimeout(() => updateMessage(''), resolve), 5000));
};
const initMessage = async (msg) => {
updateMessage(msg);
await clearLogger();
}

TA貢獻1829條經(jīng)驗 獲得超7個贊
我用 useEffect 解決了這個問題。您想清除返回函數(shù)中的超時
const [message, updateMessage] = useState(msg);
useEffect(() => {
const t = setTimeout(() => {
console.log('wiping message');
updateMessage('');
}, 4000);
return () => {
clearTimeout(t)
}
}, [message])
function initMessage(msg) {
updateMessage(msg);
}

TA貢獻2036條經(jīng)驗 獲得超8個贊
在 clearTimeout() 完成后嘗試執(zhí)行 set timeout
clearTimeout(someVariable, function() {
t = setTimeout(() => {
console.log('wiping message');
updateMessage('');
}, 4000);
});
function clearTimeout(param, callback) {
//`enter code here`do stuff
}
或者你也可以使用 .then() 。
clearTimeout(param).then(function(){
t = setTimeout(() => {
console.log('wiping message');
updateMessage('');
}, 4000);
});
添加回答
舉報