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實例從一個組件運行到另一個組件，從而導致了錯誤。