React中自定义useMessage消息钩子无法正常工作如何解决

出现该问题有两个核心原因：

• 事件绑定写法错误：onClick={success('some message')}会在组件渲染阶段直接执行success方法，而非点击按钮时触发，直接导致触发时机错乱、初始空消息弹出。
• 状态更新逻辑缺陷：如果useMessage对应的Context实现中，将severity、消息内容、显示状态拆分为独立state分别更新，会出现状态更新不同步的问题，加上如果上下文value未做引用缓存，很容易触发闭包陷阱，捕获到旧的状态值，导致severity不生效、消息内容为空。

1. 修正业务组件的事件调用写法 #

将直接执行的方法改为箭头函数包裹的回调，保证点击时才触发消息提示：

import useMessage from './useMessage'

const SomeComponent = () => {
     const { success, error } = useMessage()
     // 点击按钮时才执行success方法
     return <button onClick={() => success('some message')}>Show success</button>
}

2. 重构useMessage及对应Context实现 #

将关联状态合并管理，用useCallback、useMemo保证方法和上下文引用稳定，避免闭包和重渲染问题：

import { createContext, useContext, useState, useCallback, useMemo } from 'react'
import { Snackbar, Alert } from '@mui/material'

const MessageContext = createContext(null)

export const MessageProvider = ({ children }) => {
  // 合并所有消息相关状态，保证更新原子性，避免时序问题
  const [msgConfig, setMsgConfig] = useState({
    open: false,
    content: '',
    severity: 'info'
  })

  const closeMessage = useCallback(() => {
    setMsgConfig(prev => ({ ...prev, open: false }))
  }, [])

  const showMessage = useCallback((content, severity) => {
    setMsgConfig({
      open: true,
      content,
      severity
    })
  }, [])

  // 包装不同类型的提示方法，引用固定不会随渲染变化
  const success = useCallback((content) => showMessage(content, 'success'), [showMessage])
  const error = useCallback((content) => showMessage(content, 'error'), [showMessage])
  const warning = useCallback((content) => showMessage(content, 'warning'), [showMessage])
  const info = useCallback((content) => showMessage(content, 'info'), [showMessage])

  // 缓存上下文value，避免每次渲染生成新对象导致消费组件异常重渲染
  const contextValue = useMemo(() => ({
    success, error, warning, info
  }), [success, error, warning, info])

  return (
    <MessageContext.Provider value={contextValue}>
      {children}
      <Snackbar
        open={msgConfig.open}
        autoHideDuration={3000}
        onClose={closeMessage}
        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
      >
        <Alert severity={msgConfig.severity} onClose={closeMessage}>
          {msgConfig.content}
        </Alert>
      </Snackbar>
    </MessageContext.Provider>
  )
}

const useMessage = () => {
  const context = useContext(MessageContext)
  if (!context) throw new Error('useMessage 必须在MessageProvider内部使用')
  return context
}

export default useMessage

3. 确认根组件包裹正确 #

将MessageProvider放在应用最外层，保证所有业务组件都能获取到上下文：

import { MessageProvider } from './useMessage'
import Panel from './Panel'

export default function App() {
  return (
    <MessageProvider>
      <Panel />
    </MessageProvider>
  )
}

完成以上调整后，severity切换、消息内容显示都会正常工作，不会再出现空消息、类型不生效的问题。

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