ionic-framework - Ionic Capacitor Deep links (appUrlOpen) 事件运行多次 10+

Question

我正在构建一个应用程序，其中有深层链接可以打开应用程序并根据 url 运行特定功能。但是事件触发多次并运行相同的功能之后我有 10 多个需要确认的警报。

这是通过 livereload 在真实设备上运行应用程序

这是我作为 React 组件的代码

import { useEffect } from "react";
import { App, URLOpenListenerEvent } from "@capacitor/app";

import { useCamera } from "src/hooks";

const AppUrlListener: React.FC<any> = () => {
  const { startActionApprovalProcess } = useCamera();

  useEffect(() => {
    App.addListener("appUrlOpen", (event: URLOpenListenerEvent) => {
      let actionUrl: string | null = event.url.replace("myrecheck", "https");
      startActionApprovalProcess(actionUrl);
      actionUrl = null;
    });
    App.addListener("appStateChange", event => {
      console.log("appStateChange:", JSON.stringify(event));
    });
  }, [startActionApprovalProcess]);

  return null;
};

export default AppUrlListener;

我正在将它导入 App.tsx（Firebase Notifications Listener，它也会再次运行多次），就像普通组件一样

<AppUrlListener />
<NotificationsListener />

这是我的控制台日志首先我从应用程序移动到浏览器状态更改然后从深层链接打开应用程序并运行来自原始日志的事件然后是应用程序新状态然后再次从我的函数中记录

VM3:207 result App.addListener (#8693379)
index.tsx:16 appStateChange: {"isActive":false}
VM3:207 result App.addListener (#8693383)
index.tsx:16 appStateChange: {"isActive":false}
VM3:207 result App.addListener (#8693385)
index.tsx:16 appStateChange: {"isActive":false}
VM3:207 result App.addListener (#8693387)
index.tsx:16 appStateChange: {"isActive":false}
VM3:207 result App.addListener (#8693389)
index.tsx:16 appStateChange: {"isActive":false}
VM3:207 result App.addListener (#8693391)
index.tsx:16 appStateChange: {"isActive":false}
VM3:207 result App.addListener (#8693393)
index.tsx:16 appStateChange: {"isActive":false}
VM3:207 result App.addListener (#8693395)
index.tsx:16 appStateChange: {"isActive":false}
VM3:207 result App.addListener (#8693402)
index.tsx:16 appStateChange: {"isActive":false}
VM3:207 result App.addListener (#8693404)
index.tsx:16 appStateChange: {"isActive":false}
VM3:207 result App.addListener (#8693378)
qr-decode.ts:12 url origin https://my.recheck.io
VM3:207 result App.addListener (#8693382)
qr-decode.ts:12 url origin https://my.recheck.io
VM3:207 result App.addListener (#8693384)
qr-decode.ts:12 url origin https://my.recheck.io
VM3:207 result App.addListener (#8693386)
qr-decode.ts:12 url origin https://my.recheck.io
VM3:207 result App.addListener (#8693388)
qr-decode.ts:12 url origin https://my.recheck.io
VM3:207 result App.addListener (#8693390)
qr-decode.ts:12 url origin https://my.recheck.io
VM3:207 result App.addListener (#8693392)
qr-decode.ts:12 url origin https://my.recheck.io
VM3:207 result App.addListener (#8693394)
qr-decode.ts:12 url origin https://my.recheck.io
VM3:207 result App.addListener (#8693401)
qr-decode.ts:12 url origin https://my.recheck.io
VM3:207 result App.addListener (#8693403)
qr-decode.ts:12 url origin https://my.recheck.io
VM3:207 result App.addListener (#8693379)
index.tsx:16 appStateChange: {"isActive":true}
VM3:207 result App.addListener (#8693383)
index.tsx:16 appStateChange: {"isActive":true}
VM3:207 result App.addListener (#8693385)
index.tsx:16 appStateChange: {"isActive":true}
VM3:207 result App.addListener (#8693387)
index.tsx:16 appStateChange: {"isActive":true}
VM3:207 result App.addListener (#8693389)
index.tsx:16 appStateChange: {"isActive":true}
VM3:207 result App.addListener (#8693391)
index.tsx:16 appStateChange: {"isActive":true}
VM3:207 result App.addListener (#8693393)
index.tsx:16 appStateChange: {"isActive":true}
VM3:207 result App.addListener (#8693395)
index.tsx:16 appStateChange: {"isActive":true}
VM3:207 result App.addListener (#8693402)
index.tsx:16 appStateChange: {"isActive":true}
VM3:207 result App.addListener (#8693404)
index.tsx:16 appStateChange: {"isActive":true}
qr-decode.ts:17 Success new apiUrl:  https://my.recheck.io
VM3:233 native App.getInfo (#8693412)
qr-decode.ts:17 Success new apiUrl:  https://my.recheck.io
VM3:233 native App.getInfo (#8693413)
qr-decode.ts:17 Success new apiUrl:  https://my.recheck.io
VM3:233 native App.getInfo (#8693414)
qr-decode.ts:17 Success new apiUrl:  https://my.recheck.io
VM3:233 native App.getInfo (#8693415)
qr-decode.ts:17 Success new apiUrl:  https://my.recheck.io
VM3:233 native App.getInfo (#8693416)
qr-decode.ts:17 Success new apiUrl:  https://my.recheck.io
VM3:233 native App.getInfo (#8693417)
qr-decode.ts:17 Success new apiUrl:  https://my.recheck.io
VM3:233 native App.getInfo (#8693418)
qr-decode.ts:17 Success new apiUrl:  https://my.recheck.io
VM3:233 native App.getInfo (#8693419)
qr-decode.ts:17 Success new apiUrl:  https://my.recheck.io
VM3:233 native App.getInfo (#8693420)
qr-decode.ts:17 Success new apiUrl:  https://my.recheck.io
VM3:233 native App.getInfo (#8693421)
VM3:207 result App.getInfo (#8693412)
VM3:207 result App.getInfo (#8693413)
VM3:207 result App.getInfo (#8693414)
VM3:207 result App.getInfo (#8693415)
VM3:207 result App.getInfo (#8693416)
VM3:207 result App.getInfo (#8693417)
VM3:207 result App.getInfo (#8693418)
VM3:207 result App.getInfo (#8693419)
VM3:207 result App.getInfo (#8693420)
VM3:207 result App.getInfo (#8693421)

Ionic:

   Ionic CLI       : 6.17.0 (/Users/byurhanbeyzat/.nvm/versions/node/v16.3.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.7.0

Capacitor:

   Capacitor CLI      : 3.1.2
   @capacitor/android : 3.2.2
   @capacitor/core    : 3.2.2
   @capacitor/ios     : 3.2.2

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.4.1) : 1.4.0

System:

   NodeJS : v16.3.0 (/Users/byurhanbeyzat/.nvm/versions/node/v16.3.0/bin/node)
   npm    : 7.21.1
   OS     : macOS Big Sur

标签： ionic-frameworkcapacitorionic-react