ReactJS: componentWillUnmount not working across project

时间:2016-08-31 12:33:58

标签: reactjs

I have an issue with ReactJS. Specifically componentWillUnmount is not being called across the project at all (a semi-large corporate website). I will list the steps I have taken to diagnose and pinpoint the issue:

  • I am using a simple console.log message to test, to exclude problems inside the function
  • I have placed it in different jsx files in the project, to exclude function positioning problems
  • I have checked against switching pages in the app and loading a different website altogether
  • I checked to see whether the function is called from parents, siblings or children, since I've found competing lifecycle calls can cause neither to work, but it's the only one in the project so far
  • I tried it on a different branch with no effect
  • I tried it on a colleague's computer with no effect
  • A different lifecycle function (componentWillMount) works fine

I am using ES6 with react 15.1.0, react-bootstrap and react-validation. The relevant code is below, but keep in mind I have placed the function in numerous places and it does not appear to get called anywhere.

export default class YourData extends React.Component {

constructor(props){
    super(props);
    this.getMainBookers = this.getMainBookers.bind(this);

    this.bookingTravelCompanyForms = this.props.your_data.bookings.map(
        (booking, i) => {
            var mainBookers = i > 0 ? this.getMainBookers : false;
            return (
                <BookingTravelCompanyForm booking={booking} key={i}
                                          mainBookers={mainBookers}
                                          onInputChange={this.props.onInputChange}/>
            );
        }
    );
}
componentWillMount(){
    this.props.initializeInput();
}
componentWillUnmount(){
    console.log('willunmount yourdata');
    this.props.saveInput();
}
getMainBookers() {
    var mainform = this.bookingTravelCompanyForms[0];
    return mainform.props.booking.company;
}

handleSubmit(event) {
    event.preventDefault();

    // Emulate async API call
    setTimeout(() => {
        this.refs.form.showError('username', <span onClick={this.removeApiError.bind(this)}
                                                   className='form-error is-visible'>API Error. Click to hide out.</span>);
    }, 1000);
}

copyTravelCompany() {
    var travelCompany = this.bookingTravelCompanyForms[0];
    this.setState({
        travelCompany: travelCompany
    });
}


render() {

0 个答案:

没有答案