React.js中OneSignal推送通知展示时触发UI更新的实现问题

你遇到的核心问题有两个：事件回调参数错误，以及React环境下事件监听的生命周期管理不当，导致notificationDisplay事件未按预期触发或无法更新UI。

1. 回调参数错误 #

notificationDisplay事件的回调参数不是订阅状态（isSubscribed），而是通知对象。你原代码里的参数名和逻辑完全错误，这会导致你误以为事件没触发（实际可能触发了，但console输出的内容不符合预期）。

2. 监听时机与生命周期问题 #

你在runOneSignalOnLogin函数中绑定事件，但如果该函数被多次调用（比如重复登录），会重复初始化OneSignal，导致事件监听被覆盖或失效。同时，React组件中未处理监听的移除，容易造成内存泄漏。

修正后的代码示例 #

建议将OneSignal的初始化和事件监听与React组件生命周期绑定，用useEffect管理：

import { useEffect, useState } from 'react';
import OneSignal from "react-onesignal";

function NotificationBar() {
  // 用状态管理UI更新，比如未读通知计数
  const [unreadCount, setUnreadCount] = useState(0);

  useEffect(() => {
    let isInitialized = false;

    async function initOneSignal() {
      // 避免重复初始化
      if (isInitialized) return;
      isInitialized = true;

      await OneSignal.init({
        appId: process.env.REACT_APP_ONE_SIGNAL_ID,
        allowLocalhostAsSecureOrigin: true,
      });

      // 绑定通知展示事件
      const handleNotificationDisplay = (notification) => {
        console.log("收到并展示通知:", notification);
        // 更新UI：比如增加未读计数
        setUnreadCount(prev => prev + 1);
        // 这里可以做其他UI操作，比如弹出自定义通知组件、更新消息列表等
      };

      OneSignal.on("notificationDisplay", handleNotificationDisplay);

      // 组件卸载时移除监听，避免内存泄漏
      return () => {
        OneSignal.off("notificationDisplay", handleNotificationDisplay);
      };
    }

    initOneSignal();
  }, []);

  return (
    <div className="notification-bar">
      未读通知: {unreadCount}
    </div>
  );
}

export default NotificationBar;

额外注意事项 #

• 确保OneSignal.init只执行一次：可以通过全局变量或状态判断是否已初始化，避免重复调用导致的异常。
• 登录/ logout时的外部用户ID管理：可以保留你原有的runOneSignalOnLogin和runOneSignalOnLogout函数，但要确保它们在OneSignal初始化完成后调用。
• 检查SDK版本：如果使用的是旧版react-onesignal，可能存在事件名称或参数差异，建议升级到最新稳定版。

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