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

这个问题是我没有打电话introJs.exit（）上componentWillUnmount。这使我的introJs实例从一个组件运行到另一个组件，从而导致了错误。