我如何在反应钩子中编写“setTimeOut”函数？

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])

isUn​​mounted 防止在未安装的组件中使用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)
          }
        })
  }
}