我试图显示一些反应错误消息并在 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
被设置为未定义,因此不会显示错误消息。如果我在导出时将其设置为 trueError
,然后它会被显示Header
元素没有被删除时visible
变成假的。
你想要控制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>
)
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)