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

让我们一步步排查并修复你的问题：

问题根源分析 #

你的Notification.js里存在几个关键问题：

1. 组件参数写法错误：你把duration作为第二个参数传入组件，但React组件的第二个参数是context，不是自定义参数，这会导致duration的取值不符合预期。
2. useEffect依赖缺失：当前useEffect只监听duration，但当Redux里的message或hasError变化时（比如login_fail触发），不会重新触发通知显示逻辑，导致通知只在组件初始化时闪一下，后续状态变化无响应。
3. 容器未关联显示状态：你只控制了消息文本的显示，而notification-container始终渲染，所以容器不会自动隐藏。
4. 无初始状态判断：组件初始化时会直接显示通知，但此时message可能为空，导致无效的闪屏。

分步解决方案 #

1. 修正组件参数与状态逻辑 #

把duration移到props解构里，同时添加对message和hasError的监听，还要处理定时器的清除（防止内存泄漏）：

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

const Notification = (props) => {
  // 从props解构，默认duration为5000ms
  const { message, hasError, duration = 5000 } = props;
  const [showNotification, setShowNotification] = useState(false);
  let timerId;

  useEffect(() => {
    // 只有当有错误或非空消息时，才显示通知
    if (hasError && message) {
      setShowNotification(true);
      // 设置自动隐藏定时器
      timerId = setTimeout(() => {
        setShowNotification(false);
      }, duration);
    }

    // 组件卸载或依赖变化时清除定时器
    return () => clearTimeout(timerId);
  }, [message, hasError, duration]); // 监听message、hasError和duration的变化

  // 根据showNotification控制容器的显示隐藏
  return (
    showNotification && message ? (
      <div className="notification-container">
        {message}
      </div>
    ) : null
  );
}

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

export default connect(mapStateToProps)(Notification);

2. 修复UserActions里的Payload错误 #

你的LoginAction中LOGIN_FAIL的payload传递有误，Reducer里取的是action.payload.status，但你传递的是error.response.data.message，应该改为传递整个error.response.data：

export const LoginAction = (loginState, history) => {
  return async (dispatch) => {
    try {
      const res = await axios.post("api/login", loginState);
      const { data } = res;
      dispatch({ type: UserActionTypes.LOGIN_SUCCESS, payload: data });
      history.push("/");
    } catch (error) {
      if (error.response) {
        // 修正：传递整个data对象，而不是单独的message
        dispatch({ type: UserActionTypes.LOGIN_FAIL, payload: error.response.data });
      }
    }
  };
};

3. 可选：添加CSS过渡动画（优化体验） #

如果需要让通知的显示/隐藏更平滑，可以在Notification.css里添加过渡效果：

.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 24px;
  background-color: #dc3545;
  color: white;
  border-radius: 4px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

.notification-container.hide {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

然后修改组件的渲染逻辑，用className控制动画：

return (
  showNotification && message ? (
    <div className={`notification-container ${showNotification ? '' : 'hide'}`}>
      {message}
    </div>
  ) : null
);

验证逻辑 #

当login_fail动作触发时：

1. Redux的hasError变为true，message更新为错误文本
2. useEffect监听到变化，设置showNotification为true，显示通知
3. 5秒后定时器触发，设置showNotification为false，通知容器被移除（或添加隐藏类）
4. 组件卸载或状态变化时，定时器被清除，避免内存泄漏

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