使用 setTimeout 函數在 React 中不起作用

Question

如果用戶單擊按鈕，我正在嘗試使用 setTimeout 函數，我希望它成功顯示 3 秒，它顯示但它沒有執行給定的 3 秒時間。 我究竟做錯了什么？

這是我的代碼

const [message, setMessage] = useState('')

  function handleSubmit (e) {
    e.preventDefault()

      emailjs.sendForm(process.env.SERVICE_ID,process.env.TEMPLATE_ID, form.current,process.env.PUBLIC_KEY)
    .then(function(response) {
     return setTimeout(setMessage("successFully sent"), 3000)
    }, function(err) {
      console.log('FAILED...', err);
    });
  }

Answer 1

您需要使用匿名函數，因為現在您在使用 setTimeout 時正在調用該函數

const [message, setMessage] = useState('')

  function handleSubmit (e) {
    e.preventDefault()

      emailjs.sendForm(process.env.SERVICE_ID,process.env.TEMPLATE_ID, form.current,process.env.PUBLIC_KEY)
    .then(function(response) {
     return setTimeout(() => setMessage("successFully sent"), 3000)
    }, function(err) {
      console.log('FAILED...', err);
    });
  }

Answer 2

setTimeout(func,n)在n毫秒后執行func 。

如果您希望消息在3 秒內顯示，

1. 立即設置消息
2. 3秒后清除消息。

在您的then回調中，

setMessage('successfully sent'); 
setTimeout(()=>{ // may start timer before message is set.
    setMessage('')
}, 3000);

然而，由於狀態更新的異步特性，setTimeout 可能會在成功消息之前“設置”，從而導致消息顯示時間為 2.993 秒。

更精確的解決方案是：

handleSubmit=(evt)=> { // arrow functions preserve 'this' of component
    // ....
    .then((response)=> {
         this.setState({message: 'Successfully sent'}, ()=> {
             setTimeout(()=> { // start timer after the message is set
                 this.setState({message: ''}); 
             }, 3000);
         }); 
    })
    // ...
} 

在設置消息之后，這里運行setState的第二個回調參數。