Отклонять сообщения об ошибках реагирования после таймаута - PullRequest
Новая
       84

Отклонять сообщения об ошибках реагирования после таймаута

0 голосов
/ 06 мая 2020

Я пытаюсь отобразить некоторые сообщения об ошибках реакции и скрыть их по истечении 5 секунд ожидания. Ниже приведен код: 

import * as React from 'react'
import {ErrorInfo} from '../Twilio/api'
export const Error = ({type, message, visible}: ErrorInfo) => (
    // visible=true,
    setTimeout(function () {
        visible = false
    }, 5000),
        visible ?
            <div>
                <p>
                    <strong>{type}:</strong> {message}
                    <br/>
                    <small>
                        UI version: <code>{GLOBAL_VERSION}</code>
                    </small>
                </p>
            </div> : <span/>
)

ErrorInfo выглядит следующим образом: 

export type ErrorInfo = {
    type: string
    message: string
    visible: boolean
}

Однако для visible установлено значение undefined, поэтому сообщение об ошибке не отображается. Если я установил для него значение true при экспорте Error, тогда он отображается, когда элемент Header не удаляется, когда visible становится false.

Ответы [ 2 ]

1 голос
/ 06 мая 2020

вы хотите контролировать состояние visible в вашем Error компоненте.

И затем вы можете использовать useEffect, чтобы скрыть ошибку через 5 секунд (с надлежащей очисткой) 

export const Error = ({ type, message }: ErrorInfo) => {
   const [visible, setVisible] = useState(false)
   useEffect(() => {
     // message is empty (meaning no errors). Adjust as needed
     if(!message){
      setIsVisible(false)
      return
     }
     // error exists. Display the message and hide after 5 secs
     setIsVisible(true)
     const timer = setTimeout(() => {
       setIsVisible(false)
     }, 5000);
     return () => clearTimeout(timer);
   }, [message]) // executes every time `message` changes. Adjust as needed
   if(!visible) return null
   return (
      <div>
        <p>
            <strong>{type}:</strong> {message}
            <br />
            <small>
                UI version: <code>{GLOBAL_VERSION}</code>
            </small>
        </p>
    </div>
   )
}
1 голос
/ 06 мая 2020

Вы должны использовать состояние. Примерно так: 

export default function App() {
  const [visible, setIsVisible] = React.useState(false);

  setTimeout(function() {
    setIsVisible(true);
  }, 5000);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {visible && <p>Will show in 5 seconds</p>}
    </div>
  );
}

Посмотрите демо здесь

...