Блог

Я работаю над Ionic React Project приложением , работающим поверх Capacitor , и мне нужно показывать всплывающее сообщение <IonToast> каждый раз, когда нет подключения к Интернету. Чтобы получить информацию о сети и подключении, я использую Network Capacitor Plugin : https://capacitorjs.com/docs/apis/network Я использую контекстный крючок для использования реквизита везде в приложении.

В MyContext.tsx я объявил необходимые константы следующим образом:

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

На главной странице.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;
 

Моя проблема в том, что всплывающее сообщение вообще не отображается. Я вошел showToast в систему, и его значение всегда равно false, даже если у меня нет подключения к Интернету в моем эмуляторе Android (showToast должен быть установлен в значение true).

В консоли я вижу результат Network.getStatus :

 result Network.getStatus
connected: false
 

Похоже, что функция useEffect() вообще не выполняется. Я добавил некоторую консоль.войдите в useEffect (), и ни один из них не был показан в консоли при отображении домашней страницы.
У тебя есть какие-нибудь идеи, почему?

Любая помощь была бы очень признательна! Спасибо!

Я бы предложил перенести проверку сети в 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)
});
 

таким образом, вы можете задать соответствующее состояние независимо от конкретной страницы, которая в данном примере является домашней страницей.