Next.js自定义useAlert Hook失效，Ant Design提示无法渲染求助

核心问题 #

1. 事件回调返回组件无法渲染：checkAccess是按钮点击的事件处理函数，这类函数中返回JSX不会被React自动渲染到页面，必须通过状态变量控制组件的显示/隐藏。
2. useAlert的触发逻辑不符需求：当前useAlert在Hook挂载时自动调用setIsVisible(true)，但实际需要的是点击Sell按钮后才触发提示，而非组件一挂载就弹出。
3. Antd message触发时机错误：原Alert组件依赖isVisible的useEffect触发message，但如果组件本身没被渲染，这个useEffect根本不会执行，自然不会弹出提示。

解决方案 #

步骤1：用状态控制Alert组件的显示 #

修改HeaderTop组件，新增状态变量控制Alert是否展示：

import { useState } from 'react';
import Alert from './path/to/Alert';

const HeaderTop = () => {
  // 新增状态：控制提示框显示
  const [showProfileAlert, setShowProfileAlert] = useState(false);

  const checkAccess = () => {
    if (isLoggedIn && profileUpdated) {
      sellFunction();
    } else {
      if (isLoggedIn) {
        // 改为设置状态，而非直接返回组件
        setShowProfileAlert(true);
      } else {
        setLogin(true);
      }
    }
  };

  return (
    <div>
      <button onClick={checkAccess}>Sell</button>
      {/* 根据状态渲染Alert组件 */}
      {showProfileAlert && (
        <Alert 
          alertText="Update your Profile" 
          success={false} 
          onClose={() => setShowProfileAlert(false)} 
        />
      )}
    </div>
  );
};

步骤2：调整useAlert逻辑，改为手动触发 #

将原自动显示的逻辑改为手动调用触发：

import { useEffect, useState } from 'react';

const useAlert = () => {
  const [isVisible, setIsVisible] = useState(false);

  // 手动触发提示显示
  const showAlert = () => {
    setIsVisible(true);
    // 保留自动关闭逻辑
    const timeout = setTimeout(() => {
      setIsVisible(false);
    }, 5000);
    return () => clearTimeout(timeout);
  };

  const closeAlert = () => {
    setIsVisible(false);
  };

  return { isVisible, showAlert, closeAlert };
};

export default useAlert;

步骤3：优化Alert组件（二选一） #

方案A：直接调用Antd message（最简方案）

如果只需要Antd的全局提示，无需封装组件，直接在逻辑中调用：

import { message } from 'antd';

const checkAccess = () => {
  if (isLoggedIn && profileUpdated) {
    sellFunction();
  } else {
    if (isLoggedIn) {
      // 直接触发Antd错误提示
      message.error("Update your Profile");
    } else {
      setLogin(true);
    }
  }
};

方案B：保留自定义Alert组件

调整Alert组件，适配状态控制逻辑：

import { CloseIcon } from "./icons/icon";
import { message } from "antd";
import useAlert from "../../useHooks/useAlert";
import { useEffect } from "react";

const Alert = ({ alertText, success, onClose }) => {
  const { isVisible, closeAlert } = useAlert();

  // 关闭时通知父组件更新状态
  useEffect(() => {
    if (!isVisible && onClose) {
      onClose();
    }
  }, [isVisible, onClose]);

  // 组件挂载时触发Antd提示
  useEffect(() => {
    success ? message.success(alertText) : message.error(alertText);
  }, []);

  return (
    <div style={{ display: isVisible ? 'block' : 'none' }}>
      <p>{alertText}</p>
      <button onClick={closeAlert}> <CloseIcon /> </button>
    </div>
  );
};

export default Alert;

关键总结 #

• React事件处理函数不能通过返回JSX渲染组件，必须依赖状态变量控制。
• 全局提示类组件（如Antd message）可直接在业务逻辑中调用，无需额外封装（除非需要自定义UI）。
• 自定义Hook的逻辑要匹配实际需求，明确是自动触发还是手动触发。

内容的提问来源于stack exchange，提问作者Omokefe Ovie David