<IonToast> 应该在没有网络连接时显示，但没有

Question

我正在 Capacitor 之上处理 Ionic React Project 运行，我需要显示 Toast 消息 <IonToast>，每次有 没有互联网连接。要获取网络和连接信息，我正在使用 Network Capacitor Plugin：https://capacitorjs.com/docs/apis/network 我正在使用上下文挂钩在应用程序的任何地方使用道具。

在MyContext.tsx中我声明了必要的常量如下：

const [showToast, setShowToast] = useState<boolean>(false);
  const [toastMessage, setToastMessage] = useState("");

在HomePage.tsx:

import {
  IonContent,
  IonPage,
  IonButton,
  IonGrid,
  IonRow,
  IonCol,
  IonAlert,
  IonToast,
} from "@ionic/react";
import React, { useState, useEffect, useRef } from "react";
import { Network } from "@capacitor/network";

const HomePage: React.FC = () => {
  const {
    firstName,
    setFirstName,
    showToast,
    setShowToast,
    toastMessage,
    setToastMessage,
  } = React.useContext(MyContext);
  const history = useHistory();
  const mounted = useRef(true);

  //Check internet connection status
  useEffect(() => {
    mounted.current = true;
    const logCurrentNetworkStatus = async () => {
      const status = await Network.getStatus();
      if (mounted.current) {
        if (status.connected) {
          setShowToast(false);
        } else {
          setShowToast(true);
          setToastMessage("No internet connection");
        }
      }
    };
    return () => {
      logCurrentNetworkStatus();
      mounted.current = false;
    };
  }, []);

  console.log("showToast is " + showToast);
  console.log("Toast message is " + toastMessage);


  return (
    <React.Fragment>
      <IonPage className="ion-page" id="main-content">
        <IonContent className="ion-padding">
          <IonGrid>
            <IonRow>
              <IonCol>
                <IonToast
                  isOpen={showToast}
                  onDidDismiss={() => setShowToast(false)}
                  message={toastMessage}
                  position="top"
                  buttons={["Ok"]}
                />
              </IonCol>
            </IonRow>

                  <h5 className="text-center">Welcome to home page</h5>
                
          </IonGrid>
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
};

export default HomePage;

我的问题是：Toast 消息根本没有显示。我已经记录了 showToast，它的值总是 false，即使我的 Android 模拟器没有互联网连接（showToast 应该设置为 true）。

在控制台中，我可以看到 Network.getStatus:

的结果

result Network.getStatus
connected: false

似乎根本没有执行useEffect()。我在 useEffect() 中添加了一些 console.log，其中的 none 在 HomePage 渲染时显示在控制台中。你知道为什么吗？

非常感谢任何帮助！谢谢！

Answer 1

我建议将网络检查移至 MyContext.tsx 并使用 API

提供的侦听器

const [showToast, setShowToast] = useState<boolean>(false);
const [toastMessage, setToastMessage] = useState("");


Network.addListener('networkStatusChange', status => {
  console.log('Network status changed', status);
  status.connected ?  setShowToast(true) :   setShowToast(false)
});

通过这种方式，您可以独立于特定页面设置适当的状态，在本例中为主页。

<IonToast> 应该在没有网络连接时显示，但没有

<IonToast> should be shown when there's no network connection, but it's not

reactjs

ionic-framework

capacitor

ionic-react