從 Firebase 實時更新 React-native 中的數據（使用 NestJs）

Question

我正在使用 NodeJs(NestJs) 和 Firebase 學習 React Native/Reactjs。我在更新實時數據時遇到了一些問題。 例如，我有一個代表通知的鈴鐺圖標，我希望它在數據更改時更新並顯示數據庫中未讀通知的數量。 我的代碼：

API

  async getNotifications(data: any): Promise<any> {
    const receiverId = data.userId;
    const warehouseId = await this.getKhoId(receiverId);
    const ref = db.ref('/Notification');
    const result = [];
    await ref.once('value', function (snapshot) {
      if (snapshot.val())
        for (let j = 0; j < warehouseId.length; j++)
          for (let i = 0; i < snapshot.val().length; i++) {
            if (
              snapshot.val()[i] &&
              snapshot.val()[i].warehouseId == warehouseId[j]
            ) {
              result.push({
                content: snapshot.val()[i].content,
                read: snapshot.val()[i].read,
                time: snapshot.val()[i].time,
                number: i,
              });
            }
          }
      else return 'None';
    });

    return result;
  }

反應本機

  useEffect(() => {
    const handleData = async () => {
      const userId = await SecureStore.getItemAsync("userId");
      const numberOfNoti = await axios({
        method: "post",
        url: "http://192.168.1.8:5000/getNotifications",
        data: {
          userId: userId,
        },
      }).then(function (response) {
        let val = 0;
        if (response.data) {
          response.data.forEach((item) => {
            if (item.read === 0) {
              val++;
            }
          });
        }
        return val;
      });
      setNumberOfNoti(numberOfNoti);
    };
    handleData();
  }, []);

組件 AppBar 包含鈴鐺圖標：

 {numberOfNoti !== 0 ? (
            <Badge size={16} style={{ position: "absolute", top: 5, right: 5 }}>
              {numberOfNoti}
            </Badge>
          ) : (
            void 0
          )}

當 Firebase 中的數據發生變化時，如何實時更新 Badge 中的數字？ 我還有通知組件，其中包含通知列表和更新該通知的 state（從未讀到已讀 onPress），我也想更改徽章編號。

Answer 1

我意識到我可以調用 API 來使用 setInterval 連續更新，它看起來像這樣。 我不知道這是否是正確的方法，但它運行良好。

  useEffect(() => {
    const interval = setInterval(() => {
      const handleData = async () => {
        const userId = await SecureStore.getItemAsync("userId");
        const numberOfNoti = await axios({
          method: "post",
          url: "http://192.168.1.2:5000/getNotifications",
          data: {
            userId: userId,
          },
        }).then(function (response) {
          let val = 0;
          if (response.data) {
            response.data.forEach((item) => {
              if (item.read === 0) {
                val++;
              }
            });
          }
          return val;
        });
        setNumberOfNoti(numberOfNoti);
      };
      handleData();
    }, 1000);
    return () => clearInterval(interval);
  }, []);