超时后关闭反应错误消息

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 被设置为未定义，因此不会显示错误消息。如果我在导出 Error 时将其设置为 true，则当 visible 变为 false 时，Header 元素不会删除它。

Answer 1

你应该使用状态。像这样：

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

查看演示 here

Answer 2

您想要控制 Error 组件中的 visible 状态。

然后，您可以使用 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>
   )
}

超时后关闭反应错误消息

Dismiss react error messages after a timeout

reactjs

tsx

twilio-programmable-chat