ReactJS中PrimeReact Messages在useEffect（组件挂载）时无法触发

• ref为null的本质：目标组件未挂载
  当pageState.loading或pageState.error为true时，你的组件直接返回了<PageLoader />或<PageError />，这时候PrimeReact的Messages组件完全没被渲染到DOM里，对应的pageNotification ref自然指向null，调用show方法必然触发Cannot read properties of null错误。

• 移除状态判断后正常的原因
  删掉这两个判断后，Messages组件会被正常挂载到DOM中，React会在组件挂载完成后把ref关联到Messages的实例上，此时useEffect里调用pageNotification.current?.show()就能正常触发消息提示。

• 可行的优化方案

  • 把Messages组件放在不受loading/error状态影响的位置（比如页面根容器的最外层），确保它始终被渲染
  • 强制使用可选链操作符?.做安全访问：pageNotification.current?.show({...})，避免null报错
  • 如果需要在loading/error状态下也能显示消息，可在<PageLoader />或<PageError />中也引入Messages组件

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