Javascript 我怎样才能写；设置超时“；在react钩子中的功能？

我正在根据服务器响应在组件上显示一条“消息”，我希望该消息在5秒钟后消失。我尽了最大的努力，但是运气不好，你能帮我吗

这是我的密码：

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

import React，{useState}来自“React”；
从“react bootstrap”导入{表单、按钮、容器、行、列}
从“axios”导入axios
导出默认函数用户（）{
const[email，setEmail]=useState（“”）；
const[name，setName]=useState（“”）；
const[message，setMessage]=useState（“”）
函数handleSubmit（e）{
e、 预防默认值（）
const-credential={email，name}；
axios
.post（“/”，凭证）
。然后（响应=>{
如果（response.status==201）{
重置输入（）
setMessage（response.data.message）
}
})
.catch（错误=>{
if（error.response.status===409）{
setMessage（error.response.data.message）
}
})
}
函数resetInputs（）{
setEmail（“”）
集合名（“”）
}
返回(
欢迎来到我的网站
输入您的姓名和电子邮件以加入我们的等待名单！

{message}

)
}

您在设置消息后调用

设置超时

，告诉它在五秒钟后启动，然后清除消息：

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
      });                    // ***
}

或

---

设置消息后，您可以调用

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
      });                    // ***
}

或

---

您可以将setTimout添加到axios调用中，也可以像下面这样单独重置它：

import { useEffect } from "react";

...

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

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

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

---

isUnmounted禁止在未安装的组件中使用

setMessage（）

，用户可以在到达时间之前关闭组件。

您可以将setTimout添加到axios调用中，也可以像下面这样独立重置它：

import { useEffect } from "react";

...

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

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

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

---

isUnmounted禁止在未安装的组件中使用

setMessage（）

，用户可以在到达时间之前关闭组件。

类似的操作可能会起作用（未测试）：

const useTimedState=（初始状态，持续时间）=>{
常量[状态，设置状态]=设置状态（初始状态）；
useffect（（）=>{
如果（状态类型==='undefined'）{
返回；
}
常量计时器=设置超时（（）=>{
设置状态（）；
}，持续时间）；
return（）=>clearTimeout（计时器）；
}，[州]；
返回[状态，设置状态]；
}

导出默认函数用户（）{
const[email，setEmail]=useState（“”）；
const[name，setName]=useState（“”）；
const[message，setMessage]=useTimedState（未定义，5000）；
函数handleSubmit（e）{
e、 预防默认值（）
const-credential={email，name}；
axios
.post（“/”，凭证）
。然后（响应=>{
如果（response.status==201）{
重置输入（）
setMessage（response.data.message）
}
})
.catch（错误=>{
if（error.response.status===409）{
setMessage（error.response.data.message）
}
})
}
}

类似的方法可能有效（未经测试）：

const useTimedState=（初始状态，持续时间）=>{
常量[状态，设置状态]=设置状态（初始状态）；
useffect（（）=>{
如果（状态类型==='undefined'）{
返回；
}
常量计时器=设置超时（（）=>{
设置状态（）；
}，持续时间）；
return（）=>clearTimeout（计时器）；
}，[州]；
返回[状态，设置状态]；
}

导出默认函数用户（）{
const[email，setEmail]=useState（“”）；
const[name，setName]=useState（“”）；
const[message，setMessage]=useTimedState（未定义，5000）；
函数handleSubmit（e）{
e、 预防默认值（）
const-credential={email，name}；
axios
.post（“/”，凭证）
。然后（响应=>{
如果（response.status==201）{
重置输入（）
setMessage（response.data.message）
}
})
.catch（错误=>{
if（error.response.status===409）{
setMessage（error.response.data.message）
}
})
}
}

“我尽了最大努力使用setTimeout，但没有成功”该代码是什么样子的？如果您不向我们展示它，我们无法告诉您它出了什么问题。“我尽了最大努力使用setTimeout，但没有成功”该代码是什么样子的？如果你不给我们看，我们就不能告诉你它出了什么问题。工作示例可以在这里找到工作示例可以在这里找到谢谢，这解决了我的问题。非常感谢！谢谢，伙计，这解决了我的问题。非常感谢！