Реакция / Ionic: проблема с недопустимым вызовом перехвата (использование истории для перенаправлений)

#react-native #ionic-framework #events #routes #react-hooks

#react-native #ionic-framework #Мероприятия #маршруты #реакция-перехваты

Вопрос:

Я пытаюсь перенаправить пользователей, используя событие щелчка и историю, на этот маршрут «/ tab1». Я получаю проблему с недопустимым вызовом перехвата. Я пытался удалить его, но, похоже, ничего не работает.

Пожалуйста, помогите! Спасибо!

Код :

 export class Tab2 extends Component {
  
  constructor(props: any) {
    super(props);
    
    this.playVideo = this.playVideo.bind(this)
  }
  
  playVideo() {
    // THE PROBLEM
    const history = useHistory();
    // NEED SOME REDIRECTION ON CLICK HERE
    history.push("/tab1")
  }
  
  render() {
    
    return (
      <IonPa&e&&t;
        <IonHeader&&t;
          <IonToolbar&&t;
            <IonTitle&&t;Tab 2</IonTitle&&t;
          </IonToolbar&&t;
        </IonHeader&&t;
        <IonContent&&t;
          <IonHeader collapse="condense"&&t;
            <IonToolbar&&t;
              <IonTitle size="lar&e"&&t;Tab 2</IonTitle&&t;
            </IonToolbar&&t;
          </IonHeader&&t;
          <IonButton onClick={this.playVideo}&&t;This is a play button</IonButton&&t;
        </IonContent&&t;
      </IonPa&e&&t;
    );
  }
};
  

Ответ №1:

вы можете использовать перехваты только в функциональных компонентах

 export const Tab2 =() =&&t;  {
  
  const history = useHistory();

  const playVideo =()=&&t; {
    history.push("/tab1")
  }
    
    return (
      <IonPa&e&&t;
        <IonHeader&&t;
          <IonToolbar&&t;
            <IonTitle&&t;Tab 2</IonTitle&&t;
          </IonToolbar&&t;
        </IonHeader&&t;
        <IonContent&&t;
          <IonHeader collapse="condense"&&t;
            <IonToolbar&&t;
              <IonTitle size="lar&e"&&t;Tab 2</IonTitle&&t;
            </IonToolbar&&t;
          </IonHeader&&t;
          <IonButton onClick={()=&&t;playVideo()}&&t;This is a play button</IonButton&&t;
        </IonContent&&t;
      </IonPa&e&&t;
    );
};
  

Комментарии:

1. Я вижу, что использовал компонент класса вместо функционального компонента. Это сработало как по волшебству! спасибо за помощь!