Блог

Я использую ионную платформу React для своего проекта. Я устанавливаю состояния компонента ion-toggle в значение true в результате вызова Api. когда я это делаю, при перезагрузке страницы происходит ненужный обмен ионного переключателя, который уже установлен в значение true из состояния. Я искал ответы повсюду, и большинство из них касалось угловой ионной. Вот мой код ниже. Дайте мне знать, как я могу предотвратить это.

 import { IonToggle, IonItem, IonLabel } from '@ionic/react';
import { useEffect, useState } from 'react';
 import { apiUrl } from '../../utils/apiUrl';
import Cookies from 'universal-cookie';

const sample: React.FC = () => {

  const [covidDetails, setCovidDetails] = useState<{
    firstDose?: boolean,
    secondDose?: boolean
  }>({
    firstDose: false,
    secondDose: false
  });

  const getCovidVaccine = async () => {
    try {
      const response = (await axios.get(`${apiUrl()}/user/getCovidVaccineDetails/{userIdfromcookie}`, {
        headers: {
          Authorization: `Bearer ${cookies.get('token')}`
        }
      })).data;
      if (response.covidVaccine !== null) {
        setFirstLoad(true);
        setCovidDetails({
          firstDose: response.covidVaccine.firstDose,
          secondDose: response.covidVaccine.secondDose
        })
      }
    } catch (error) {
      console.log(error);
    }
  }

//this code fires on pageload if the checked for ion-toggle is true.
const setCovidVaccine = async (e) => {
    try {
      console.log("first", covidDetails);
      var details = { firstDose: covidDetails.firstDose, secondDose: covidDetails.secondDose };
      if (e.detail.value === "firstDose") {
        details.firstDose = e.detail.checked;
      }
      if (e.detail.value === "secondDose") {
        details.secondDose = e.detail.checked;
      }
      const response = (await axios.post(`${apiUrl()}/user/setCovidVaccineDetails/{userIdfromcookie}`, details, {
        headers: {
          Authorization: `Bearer ${cookies.get('token')}`
        }
      })).data;
      if (response.covidVaccine !== null) {
        setCovidDetails({
          firstDose: response.covidVaccine.firstDose,
          secondDose: response.covidVaccine.secondDose
        })
      }

    } catch (error) {
      console.log(error);
    }
  }

 useEffect(() => {
    getCovidVaccine();
  }, []);

return (
   <div>
      <IonItem>
        <IonLabel className={styles.vaccineLabel}>
          <p>1st Dose Vaccine</p>
        </IonLabel>
        <IonToggle
          color="primary"
          checked={covidDetails.firstDose}
          value="firstDose"
          onIonChange={e => setCovidVaccine(e)}
        />
      </IonItem>
      
      <IonItem>
        <IonLabel className={styles.vaccineLabel}>
          <p>2nd Dose Vaccine</p>
        </IonLabel>
        <IonToggle
          color="primary"
          checked={covidDetails.secondDose}
          value="secondDose"
          onIonChange={e => setCovidVaccine(e)}
        />
      </IonItem>
  </div>
);