React/Redux自定义通知组件异常求助：消息闪显后容器未隐藏

我帮你排查下Notification组件的问题，这几个点导致了你的异常现象：

问题根源 #

1. 监听依赖错误：你的useEffect只监听了duration，但我们需要在Redux中message或hasError状态变化时触发通知，所以完全没捕捉到login_fail的状态更新。
2. 定时器未清理+参数定义错误：组件参数写法不对，duration=5000的默认值根本没生效；而且旧的定时器没清理，可能导致状态混乱。
3. 容器始终存在：不管通知是否显示，notification-container都留在DOM里，所以看起来“一直停在页面”。
4. 无消息校验：没有判断message是否为空，可能触发无意义的空通知。

修复后的Notification.js代码 #

import React, { useState, useEffect, useRef } from 'react';
import './Notification.css';
import { connect } from 'react-redux';

// 正确定义props，把duration设为默认参数
const Notification = ({ message, error, duration = 5000 }) => {
  const [showNotification, setShowNotification] = useState(false);
  // 用ref保存定时器ID，避免内存泄漏
  const timerRef = useRef(null);

  useEffect(() => {
    // 只有当存在错误且有消息时，才显示通知
    if (error && message) {
      setShowNotification(true);

      // 设置自动隐藏定时器
      timerRef.current = setTimeout(() => {
        setShowNotification(false);
      }, duration);
    }

    // 清理函数：组件卸载或状态变化时清除旧定时器
    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
    };
  }, [message, error, duration]); // 依赖数组改为监听message、error和duration

  // 只有当showNotification为true时，才渲染整个通知容器
  return showNotification ? (
    <div className={`notification-container ${error ? 'notification-error' : ''}`}>
      {message}
    </div>
  ) : null;
};

const mapStateToProps = (state) => ({
  error: state.user.hasError,
  message: state.user.message,
});

export default connect(mapStateToProps)(Notification);

额外修复：User.actions.js的payload匹配问题 #

你的LoginAction中LOGIN_FAIL的payload格式和reducer不匹配，reducer里取的是action.payload.status，但actions里直接传了字符串，会导致message为空，修改如下：

// User.actions.jsx的catch块
catch (error) {
  if (error.response) {
    dispatch({ 
      type: UserActionTypes.LOGIN_FAIL, 
      payload: { status: error.response.data.message } // 改成和reducer对应对象格式
    });
  }
}

修复说明 #

• 依赖调整：现在useEffect会在login_fail触发、message/error变化时自动触发通知逻辑。
• 定时器清理：用useRef保存定时器ID，在组件卸载或状态更新时清除旧定时器，避免状态混乱。
• 容器条件渲染：只有通知需要显示时才渲染容器，解决了容器残留的问题。
• 消息校验：避免空消息或非错误场景下弹出通知。

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