React組件在瀏覽器后退/前進按鈕上中斷

Question

我有兩種形式，一種叫做配置文件，另一種是設置。 我正在使用Introjs對這兩種形式進行導覽。 如果我僅使用introjs的“下一步”按鈕前進到游覽，就沒有問題（第一張圖片）。 但是，如果使用瀏覽器的“后退”或“前進”按鈕，則表單看起來像第二張圖像。

使用introjs的個人資料頁面上的代碼：

runTour() {
if (this.state.showTour === true) {
  const tourObj = {
    userId: Meteor.userId(),
    page: 'profile',
  };
  introJs.introJs().setOption('doneLabel', 'Next step').start().oncomplete(() 
=> {
    changeIntroTour.call(tourObj);
    browserHistory.push('/user/settings');
  })
    .onexit(() => {
      changeIntroTour.call(tourObj);
    });
 }
}

componentWillReceiveProps(nextProps) {
  this.existingSettings(nextProps);
  if (nextProps.intro.length > 0) {
    this.setState({
      showTour: nextProps.intro[0].profileTour,
    }, () => {
      this.runTour();
    });
  }
}

Answer 1

問題是我沒有在componentWillUnmount上調用introJs.exit（）。 這使我的introJ實例從一個組件運行到另一個組件，導致該錯誤。