超时后消除反应错误消息

Question

我正在尝试显示一些反应错误消息并在 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被设置为未定义，因此不会显示错误消息。如果我在导出时将其设置为 true ，那么当它变为 false 时，元素不会被删除，从而Error显示它。Headervisible

Answer 1

您想要控制组件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>
   )
}