设置消息超时

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

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

您的消息缩减程序可能如下所示：

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

只要您的根缩减器已经使用了某种消息缩减器，您就应该能够将这种情况添加到 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);

设置消息超时

Set timeout for message

reactjs

redux

react-redux