如何为mapStateToProps绑定的通知消息设置30秒自动隐藏功能

你当前的代码存在一处不规范的写法：mapStateToProps 是配合react-redux的connect高阶函数使用的配置函数，不能定义在组件内部，需要移到组件外部声明。

要实现消息30秒自动隐藏，可通过组件内加定时器监听消息变化的方案实现，不需要修改现有redux逻辑，代码示例如下：

方案1：使用React Hooks + useSelector（推荐写法） #

import { useSelector } from 'react-redux'
import { useEffect, useState } from 'react'

function TabPanel(props) {
  // 直接从redux取消息，不需要写mapStateToProps
  const webSocketMessage = useSelector(state => state.webSocketMessage)
  // 本地状态控制通知显隐
  const [showMessage, setShowMessage] = useState(false)

  useEffect(() => {
    // 收到非空新消息时触发
    if (webSocketMessage) {
      setShowMessage(true)
      // 开启30秒定时器
      const hideTimer = setTimeout(() => {
        setShowMessage(false)
      }, 30000)
      // 清理逻辑：消息更新/组件卸载时清除旧定时器，避免内存泄漏
      return () => clearTimeout(hideTimer)
    }
  }, [webSocketMessage])

  return (
    <>
      {showMessage && webSocketMessage ? (
        <Typography className={classes.invalidLabel} color="textSecondary">
          Successful { webSocketMessage }
        </Typography>
      ) : null}
    </>
  )
}

方案2：保留connect写法 #

import { connect } from 'react-redux'
import { useEffect, useState } from 'react'

function TabPanel(props) {
  const [showMessage, setShowMessage] = useState(false)

  useEffect(() => {
    if (props.webSocketMessage) {
      setShowMessage(true)
      const hideTimer = setTimeout(() => {
        setShowMessage(false)
      }, 30000)
      return () => clearTimeout(hideTimer)
    }
  }, [props.webSocketMessage])

  return (
    <>
      {showMessage && props.webSocketMessage ? (
        <Typography className={classes.invalidLabel} color="textSecondary">
          Successful { props.webSocketMessage }
        </Typography>
      ) : null}
    </>
  )
}

// mapStateToProps移到组件外部
const mapStateToProps = state => ({
  webSocketMessage: state.webSocketMessage
})

export default connect(mapStateToProps)(TabPanel)

可选扩展 #

如果你需要30秒后同时清空redux里存储的webSocketMessage，只需要在定时器回调中dispatch对应的清空action即可。

内容的提问来源于stack exchange，提问作者user1285928