reactjs - 超时后关闭反应错误消息
问题描述
我正在尝试显示一些反应错误消息并在超时 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 Error
,那么当它变为 false 时,它会被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>
)
}
推荐阅读
- python - 在交互中通过正则表达式传递变量
- c - 用C计算圆的面积并在主脚本中调用它
- java - 我应该如何将我的请求正文映射到另一个对象,同时保持相同的子关系?
- angular - 如何在同一个按钮上更新和提交功能
- java - Java 从枚举中查找枚举
- javascript - 切换操作员如何取消订阅以前的 observables?
- python - 从单独文件中的对象属性获取值
- php - 如何避免在 reactJS 中使用表单返回空数据?也检查后端代码,专家给我答案
- javascript - 如何从 jquery ui 自动完成呈现列表中删除项目
- css - 如何使用 ReactJS 触发 onClick 和 onHover CSS 动画?