【问题标题】:Ionic Cannot read properties of null (reading 'removeChild') at StackManager.transitionPage离子无法在 StackManager.transitionPage 读取 null 的属性(读取“removeChild”)
【发布时间】:2021-11-05 12:51:42
【问题描述】:

我开始在开发时打开应用程序时出现下一个错误(在构建/签名后也有)

我认为这是路线的问题,我认为我没有做一些事情,因为它必须是

该应用程序基本上类似于具有数字身份的加密钱包,但不适用于加密货币,它适用于我们公司。 我还有一些问题,但它们是不同的主题。 :笑脸:

index.tsx

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";

import { AuthProvider } from "./contexts";
import App from "./App";
import "./i18n";

ReactDOM.render(
  <React.StrictMode>
    <Suspense fallback={<p>Loading...</p>}>
      <Router>
        <AuthProvider>
          <App />
        </AuthProvider>
      </Router>
    </Suspense>
  </React.StrictMode>,
  document.getElementById("root"),
);

App.tsx

import { initChain } from "src/chain";
import { useAuth } from "src/contexts";
import { useBiometric } from "src/hooks";

import AppUrlListener from "src/components/AppUrlListener";
import NotificationsListener from "src/components/NotificationsListener";

import SecuritySettingsPage from "src/pages/SecuritySettings";
import SettingsPage from "src/pages/Settings";
import ScannerPage from "src/pages/Scanner";
import ProfilePage from "src/pages/Profile";
import BackupPage from "src/pages/Backup";
import ActionPage from "src/pages/Action";
import IntroPage from "src/pages/Intro";
import AboutPage from "src/pages/About";

import "src/vendor";

const App: React.FC = () => {
  const { t } = useTranslation();
  const { hasIdentity, identity } = useAuth();
  const { checkBiometric } = useBiometric();

  useEffect(() => {
    if (!hasIdentity) return;

    initChain();
    checkBiometric();
  }, [checkBiometric, hasIdentity]);

  return (
    <IonApp>
      <IonReactRouter>
        {!hasIdentity ? (
          <IonRouterOutlet id="base">
            <Route exact path="/intro" render={() => <IntroPage />} />
            <Route exact render={() => <Redirect from="/" to="/intro" />} />
          </IonRouterOutlet>
        ) : (
          <>
            <AppUrlListener />
            <NotificationsListener />

            <IonTabs>
              <IonRouterOutlet id="main">
                <Route exact path="/action" component={ActionPage} />
                <Route exact path="/profile" component={ProfilePage} />
                <Route exact path="/scanner" component={ScannerPage} />
                <Route exact path="/settings" component={SettingsPage} />
                <Route
                  exact
                  path="/settings/security"
                  component={SecuritySettingsPage}
                />
                <Route exact path="/settings/about" component={AboutPage} />
                <Route exact path="/settings/backup" component={BackupPage} />

                <Route
                  exact
                  render={() => <Redirect push from="/" to="/profile" />}
                />
              </IonRouterOutlet>

              <IonTabBar slot="bottom" color="primary">
                <IonTabButton layout="icon-top" tab="profile" href="/profile">
                  <IonIcon icon={personCircleOutline} />
                  <IonLabel>{t("Profile")}</IonLabel>
                </IonTabButton>

                <IonTabButton layout="icon-top" tab="scanner" href="/scanner">
                  <IonIcon icon={scanOutline} />
                  <IonLabel>{t("Scan")}</IonLabel>
                </IonTabButton>
                <IonTabButton layout="icon-top" tab="settings" href="/settings">
                  <IonIcon icon={settingsOutline} />
                  <IonLabel>{t("Settings")}</IonLabel>
                  {!identity?.hasBackup && (
                    <IonBadge color="danger">
                      <IonIcon icon={alertOutline} />
                    </IonBadge>
                  )}
                </IonTabButton>
              </IonTabBar>
            </IonTabs>
          </>
        )}
      </IonReactRouter>
    </IonApp>
  );
};
{
  "dependencies": {
    "@capacitor/android": "3.2.2",
    "@capacitor/app": "1.0.3",
    "@capacitor/core": "3.2.2",
    "@capacitor/haptics": "1.0.3",
    "@capacitor/ios": "^3.2.2",
    "@capacitor/keyboard": "1.0.3",
    "@capacitor/network": "^1.0.3",
    "@capacitor/push-notifications": "^1.0.4",
    "@capacitor/status-bar": "1.0.3",
    "@ionic-native/fingerprint-aio": "^5.36.0",
    "@ionic-native/native-storage": "^5.36.0",
    "@ionic-native/qr-scanner": "^5.36.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic/react": "^5.7.0",
    "@ionic/react-router": "^5.7.0",
    "@ionic/storage": "^3.0.6",
    "aes256": "^1.1.0",
    "cordova-plugin-fingerprint-aio": "^4.0.2",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-qrscanner": "^3.0.1",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "es6-promise-plugin": "^4.2.2",
    "i18next": "^20.4.0",
    "i18next-resources-to-backend": "^1.0.0",
    "ionicons": "^5.4.0",
    "jetifier": "^2.0.0",
    "node-sass": "^6.0.1",
    "react": "^17.0.1",
    "react-circular-progressbar": "^2.0.4",
    "react-dom": "^17.0.1",
    "react-hook-form": "^7.15.0",
    "react-i18next": "^11.11.4",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "recheck-clientjs-library": "^1.0.23-beta.1",
    "swiper": "^6.8.4"
  },
  "devDependencies": {
    "@capacitor/cli": "3.1.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.15",
    "@types/react": "^16.14.3",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.29.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jest": "^24.4.0",
    "eslint-plugin-json": "^3.0.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.2",
    "prettier-eslint": "^13.0.0",
    "typescript": "^4.1.3"
  }
}
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

提前致谢! :slight_smile:

【问题讨论】:

    标签: cordova ionic-framework cordova-plugins capacitor ionic-react


    【解决方案1】:

    我在 Ionic React 中遇到了同样的错误:

    Ionic 无法读取 null 的属性(读取“removeChild”) StackManager.transitionPage

    这是一个非常难以追踪的错误,因此我将分享我在特定情况下是如何解决它的。

    我将用户对象存储在useReducer() 挂钩中,并使用react-query 处理我的数据获取。

    在一个带有用户表单的页面上,我有一个带有副作用的 react-query,当用户保存表单时,将用户重定向到新页面并根据服务器更新本地存储的用户对象回复:

      onSuccess: async (response) => {
        // Redirect must precede userDispatch to avoid unmounted component error.
        history.push(routeSetupNextPage);
        userDispatch({ type: 'updateStuff', payload: response });
      },
    

    在我重定向到的页面 (routeSetupNextPage) 上,我调用了useIonViewDidEnter()

    这种更新用户对象状态的组合导致了几次重新渲染,以及history.push() 重定向到带有useIonViewDidEnter()&lt;IonPage&gt; 组件导致了三次重新渲染,其中第三次导致错误:Ionic Cannot read properties of null (reading 'removeChild') at StackManager.transitionPage

    就我而言,我通过不在onSuccess() 中调用userDispatch() 来解决此问题;关键是在转换到带有useIonDidEnter()useIonViewWillEnter() 的页面时,过多的重新渲染可能会导致这种类型的错误。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-01-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-02-12
      • 1970-01-01
      相关资源
      最近更新 更多