浏览器后退/前进按钮上的组件中断

Question

我有两种形式，一种叫做个人资料，另一种是设置。我使用introjs对这两种形式进行了导览。如果我只使用introjs＆＃39; Next Step＆＃39;按钮没有问题（第一张图片）。但是，如果我使用浏览器后退或前进按钮，我的表单看起来像第二个图像。

使用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（）。这使得我的introJs实例从一个组件运行到下一个组件导致了这个bug。