什么是最好的方法来显示一个消息到用户当一个进程在反应?

Question

用户上传一个文件，在后台我将从该文件导入一些数据到DB，在该过程完成或失败后，我想向用户显示一条消息。

显示消息的最佳方法是什么，即使用户转到另一个页面?我是否应该在根组件中添加一个间隔来检查该文件的状态?或者还有其他解决办法吗?

Answer 1

export const Toast = () => {
const { message } = useSelector(state => state.toast)
const dispatch = useDispatch();
const [show, setShow] = useState(true)
useEffect(() => {
if (message) {
setShow(true)
const timeout = setTimeout(() => {
setShow(false)
dispatch(showMessage(''))
}, 5000)
}
return () => {
if (timeout) {
clearTimeout(timeout)
setShow(false)
}
}
}, [message])
return show ? <div>{{ message }}</div> : null;
}

export const App = () => {
return <div>
<InternalApp />
<Toast />
</div>
}

export const InternalApp = () => {
const dispatch = useDispatch();
const handleClick = () => {
dispatch(showMessage('Clicked!'))
}
return <div onClick={handleClick}>data</div>
}

showMessage是从已创建的存储

中导入的操作。