设置消息的超时

Question

我使用mapStateToProps显示通知消息：

function TabPanel(props) {
{props.webSocketMessage ? (<Typography className={classes.invalidLabel} color="textSecondary">Successful { props.webSocketMessage}</Typography>) : "" }

const mapStateToProps = state => ({
webSocketMessage: state.webSocketMessage
});
}

代码有效，但我想在30秒后隐藏消息。

如何实现此功能？

Answer 1

通常，(不使用Redux(它将在将webSocketMessage作为道具传递给该组件的任何父组件中进行处理。假设您将消息作为状态存储在父级中，它可能类似于。。。

import React, {useEffect, useState} from 'react';
const ParentComponent = () => {
const [webSocketMessage, setWebSocketMessage] = useState()
useEffect(() => {
if (webSocketMessage){
setTimeout(() => setWebsocketMessage(null), 30000)
}
}, [webSocketMessage])
return <ChildComponent webSocketMessage={webSocketMessage} />
}
export default ParentComponent;

同样的想法可以转化为清除消息的redux操作，因为您正在使用redux存储来保存该消息。基本的想法是，负责发送道具的人(在你的情况下是Redux(也需要负责清除它，所以你最终会。。。

const clearMessage = () => dispatch({type: 'CLEAR_MESSAGE'})

然后，可以在reducer中使用dispatch({type: 'CLEAR_MESSAGE'})将状态中的消息设置为null、空数组或您需要的任何内容。

您的消息缩减器可能看起来像：

export function messageReducer(state = [], action) {
switch(action.type){
case 'ADD_MESSAGE':
return [...state, action.errorMessage]
case 'CLEAR_MESSAGES':
return []
default:
return state
}
}

只要根reducer已经使用了某种消息reducer，就应该能够将这种情况添加到switch语句中。

最后，在这个片段所取自的组件中，您可以拥有类似。。。

useEffect(() => {
setTimeout(props.clearMessages, 30000)
}

最终

const Whatever = () => {
// code
useEffect(() => {
setTimeout(props.clearMessages, 30000)
}
//other code
}
const mapStateToProps = (state) => {
return {
webSocketMessage: state.webSocketMessage
}
}
const mapDispatchToProps = (dispatch) => {
return {
clearMessages: () => dispatch({type: 'CLEAR_MESSAGES'})
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Whatever);