Как я могу написать функцию "setTimeOut" в перехватчиках реакции? - PullRequest
Новая
       68

Как я могу написать функцию "setTimeOut" в перехватчиках реакции?

0 голосов
/ 09 июля 2020

Я работаю над отображением «сообщения» в компоненте на основе ответа сервера, и я хотел, чтобы это сообщение исчезло через 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>
  )
}

Ответы [ 3 ]

2 голосов
/ 09 июля 2020

Вы вызываете 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)
        }
      });
}
0 голосов
/ 09 июля 2020

Что-то вроде этого может работать (не проверено): 

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)
          }
        })
  }
}
0 голосов
/ 09 июля 2020

Вы можете добавить setTimout к вашему вызову ax ios или сбросить его независимо следующим образом: 

import { useEffect } from "react";

...

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

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

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

isUnmounted предотвращает использование setMessage() в размонтированном компоненте, это возможно для пользователя чтобы закрыть компонент до того, как истечет время.

...