我如何在反應鈎子中寫“setTimeOut”function？

Question

我正在根據服務器響應在組件上顯示“消息”，我希望該消息在 5 秒后消失。 我盡力使用 setTimeout 但沒有運氣，你能幫幫我嗎？

這是我的代碼：

import React, { useState } from "react";
import { Form, Button, Container, Row, Col} from 'react-bootstrap'
import axios from 'axios'

export default function Users() {

  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [message, setMessage] = useState("")
  

  function handleSubmit(e){
    e.preventDefault()
    const credential = { email, name };
      axios
        .post('/', credential)
        .then(response => {
          if(response.status === 201) {
            resetInputs()
            setMessage(response.data.message)
          }
        })
        .catch(error => {
          if (error.response.status === 409) {
            setMessage(error.response.data.message)
          }
        })
  }


  function resetInputs(){
    setEmail("")
    setName("")
  }
     
  return (
  <div className="form">
            <div className="hero-container">
              <h1>Welcome to <span className="hi">my</span><span>website</span></h1>
              <h5>Enter your name and your email to join our waiting list!</h5>
              <p></p>
                <div>
                 {message}
                </div>
              <p></p>
  </div>
  )
}

Answer 1

您在設置消息后調用setTimeout ，告訴它在五秒后觸發，然后清除消息：

function handleSubmit(e){
  e.preventDefault()
  const credential = { email, name };
    axios
      .post('/', credential)
      .then(response => {
        if(response.status === 201) {
          resetInputs()
          setMessage(response.data.message)
        }
      })
      .catch(error => {
        if (error.response.status === 409) {
          setMessage(error.response.data.message)
        }
      })
      .finally(() => {       // ***
        setTimeout(() => {   // ***
            setMessage("");  // *** If you want to clear the error message as well
        }, 5000);            // *** as the normal message
      });                    // ***
}

或者

function handleSubmit(e){
  e.preventDefault()
  const credential = { email, name };
    axios
      .post('/', credential)
      .then(response => {
        if(response.status === 201) {
          resetInputs()
          setMessage(response.data.message)
          setTimeout(() => {   // *** If you only want to automatically clear
              setMessage("");  // *** this message and not an error message
          }, 5000);            // ***
        }
      })
      .catch(error => {
        if (error.response.status === 409) {
          setMessage(error.response.data.message)
        }
      });
}

Answer 2

您可以將 setTimout 添加到您的 axios 調用中，或者您可以像這樣獨立重置它：

import { useEffect } from "react";

...

useEffect(() => {
  let isUnmounted = false;

  if (message !== "") {
    setTimeout(() => {
      if (!isUnmounted ) {
        setMessage("");
      }
    }, 5000);
  }

  return () => { isUnmounted = true; };
}, [message])

isUnmounted 防止在未安裝的組件中使用setMessage() ，用戶可以在到達時間之前關閉組件。

Answer 3

像這樣的東西可能有效（未經測試）：

const useTimedState = (initialState, duration) => {
    const [state, setState] = setState(initialState);
    useEffect(() => {
        if (typeof state === 'undefined') {
            return;
        }
        const timer = setTimeout(() => {
            setState();
        }, duration);
        return () => clearTimeout(timer);
    }, [state]);
    return [state, setState];
}

export default function Users() {

  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [message, setMessage] = useTimedState(undefined, 5000);
  

  function handleSubmit(e){
    e.preventDefault()
    const credential = { email, name };
      axios
        .post('/', credential)
        .then(response => {
          if(response.status === 201) {
            resetInputs()
            setMessage(response.data.message)
          }
        })
        .catch(error => {
          if (error.response.status === 409) {
            setMessage(error.response.data.message)
          }
        })
  }
}