React 18自定义Hook内调用Notification组件不显示问题求助

问题背景 #

使用React 18、Material UI 5和nanostores 0.7.4开发项目时，在axios响应拦截器的错误处理函数中尝试渲染Notification组件，但前端无法显示该通知。

核心原因 #

1. React组件未在渲染上下文执行：axios拦截器的回调属于外部逻辑，不在React渲染生命周期内，直接创建<Notification />元素不会被React挂载到DOM中。
2. 组件挂载逻辑无效：Notification组件的useEffect依赖空数组，仅在组件挂载时触发显示操作，但组件从未被实际挂载，状态更新逻辑根本不会执行。
3. 状态初始值错误：nanostores的notification atom初始值为undefined，而Material UI的Snackbar组件open属性需要布尔值（true/false），undefined会导致组件无法正常触发显示。

修复步骤及代码示例 #

1. 重构通知状态仓库 #

扩展状态仓库，添加通知文本、类型的状态，并将显示状态初始化为false：

import { action, atom } from 'nanostores';

// 通知显示状态，初始为false
const notificationVisible = atom<boolean>(false);
// 通知文本内容
const notificationText = atom<string>('');
// 通知类型（对应MUI Alert的severity）
const notificationColor = atom<'error' | 'success' | 'warning' | 'info'>('error');

// 显示通知的action，接收文本和类型参数
const showNotification = action(
  [notificationVisible, notificationText, notificationColor],
  'showNotification',
  (visible, text, color, payload: { text: string; color: typeof notificationColor['value'] }) => {
    visible.set(true);
    text.set(payload.text);
    color.set(payload.color);
  },
);

// 关闭通知的action
const closeNotification = action(
  notificationVisible,
  'closeNotification',
  (state) => {
    state.set(false);
  },
);

export const NotificationStateStore = {
  states: { 
    notificationVisible,
    notificationText,
    notificationColor
  },
  actions: { showNotification, closeNotification },
};

2. 修改Notification组件 #

让组件从状态仓库获取数据，不再依赖props，确保只要组件挂载就能响应状态变化：

import { Alert, AlertColor, Snackbar, SnackbarCloseReason } from '@mui/material';
import { useStore } from '@nanostores/react';
import { NotificationStateStore } from './Notification.store';

export function Notification() {
  const { actions, states } = NotificationStateStore;
  const isVisible = useStore(states.notificationVisible);
  const text = useStore(states.notificationText);
  const color = useStore(states.notificationColor);

  const handleClose = (
    event: Event | React.SyntheticEvent<any, Event>,
    reason?: SnackbarCloseReason,
  ) => {
    if (reason === 'clickaway') {
      return;
    }
    actions.closeNotification();
  };

  return (
    <Snackbar
      open={isVisible}
      autoHideDuration={6000}
      onClose={handleClose}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
    >
      <Alert
        onClose={handleClose}
        severity={color as AlertColor}
        sx={{ width: '100%' }}
      >
        {text}
      </Alert>
    </Snackbar>
  );
}

3. 调整拦截器逻辑 #

在拦截器中直接调用状态仓库的showNotification action，不再尝试渲染组件：

import axios from 'axios';
import { NotificationStateStore } from '../components/Notification/Notification.store';

export function useApi() {
  const api = axios.create({
    baseURL: import.meta.env.VITE_BACKEND_URL,
  });

  api.interceptors.response.use(null, (error) => {
    // 通过状态action触发通知显示
    NotificationStateStore.actions.showNotification({
      text: 'Something went wrong, please try again ...',
      color: 'error'
    });
    return Promise.reject(error);
  });

  return { api };
}

4. 全局挂载Notification组件 #

在根组件（如App.tsx）中引入并挂载Notification组件，确保它始终存在于DOM中：

import { Notification } from './components/Notification/Notification.component';

function App() {
  return (
    <div className="App">
      {/* 其他业务组件 */}
      <Notification />
    </div>
  );
}

export default App;

修复原理 #

• 通过状态驱动UI：将通知的显示状态、内容、类型存入nanostores，拦截器仅负责更新状态，由挂载在根节点的Notification组件响应状态变化自动显示/隐藏。
• 确保组件处于React渲染上下文：Notification组件始终挂载在根节点，符合React渲染规则，能正确响应状态更新。
• 修正状态初始值：将显示状态初始化为false，确保Snackbar的open属性为有效布尔值。

内容的提问来源于stack exchange，提问作者Mohammad Jawad Barati