The part of code where I have a problem is :

constructor(props){
    super(props);

    this.state = {
        allcars: null,

        minValue: 0,
        maxValue: 50000,
        step: 1000,
        firstValue: null,
        secondValue: null,
        chcboxValue: false,

        chcboxManualValue: false,
        chcboxAutomaticValue: false
    };

    this.handleFilterChange = this.handleFilterChange.bind(this);
    this.handlePriceUpdating = this.handlePriceUpdating.bind(this);
    this.updateCarsToShow = this.updateCarsToShow.bind(this);
    this.handleTransmissionUpdating = this.handleTransmissionUpdating.bind(this);
    this.resetPriceFilter = this.resetPriceFilter.bind(this);
    this.resetTransimissionFilter = this.resetTransimissionFilter.bind(this);
}

ponentWillMount(){
    this.setState({firstValue: this.state.minValue, secondValue: this.state.maxValue, allcars: this.props.carsToShow});
}

ponentWillReceiveProps(nextProps) {
    //We get the filter which is removed
    let isRemoved = this.props.filters.filter(i => {
        return nextProps.filters.filter(a => {
            return i.searchFilter[0] !== a.searchFilter[0];
        });
    });


    //If something is removed
    if(isRemoved.length > 0){

        let removedFilter = isRemoved[0].searchFilter[0]; //The name of removed filter

        switch (removedFilter){
            case "price":
                this.resetPriceFilter();
            break;
            case "transmission":
                this.resetTransimissionFilter();
            break;
            default:
                console.log("Nothing");
        }

    }
}

resetPriceFilter(){
    this.setState({firstValue: this.state.minValue, secondValue: this.state.maxValue, chcboxValue: false});
    //We update the cars list in the store
    this.updateCarsToShow(this.state.allcars);
}
resetTransimissionFilter(){
    this.setState({chcboxManualValue: false, chcboxAutomaticValue: false});
}

If removedFilter has a value of "transmission" in ponentWillRecieveProps I get two warnings :

1. bundle.js:8335 Warning: There is an internal error in the React performance measurement code. Did not expect ponentDidUpdate timer to start while ponentWillReceiveProps timer is still in progress for another instance.

2. bundle.js:71248 Uncaught TypeError: Cannot read property 'top' of undefined

And also if the state hasn't been updated If removedFilter has a value of "transmission". If I console log something inside that case, it is shown, thus, it is inside that case, but for some reason the state isn't updated.

If removedFilter has a value of "price" then works everything as it should. The state is updated and I don't get any warnings.

The part of code where I have a problem is :

constructor(props){
    super(props);

    this.state = {
        allcars: null,

        minValue: 0,
        maxValue: 50000,
        step: 1000,
        firstValue: null,
        secondValue: null,
        chcboxValue: false,

        chcboxManualValue: false,
        chcboxAutomaticValue: false
    };

    this.handleFilterChange = this.handleFilterChange.bind(this);
    this.handlePriceUpdating = this.handlePriceUpdating.bind(this);
    this.updateCarsToShow = this.updateCarsToShow.bind(this);
    this.handleTransmissionUpdating = this.handleTransmissionUpdating.bind(this);
    this.resetPriceFilter = this.resetPriceFilter.bind(this);
    this.resetTransimissionFilter = this.resetTransimissionFilter.bind(this);
}

ponentWillMount(){
    this.setState({firstValue: this.state.minValue, secondValue: this.state.maxValue, allcars: this.props.carsToShow});
}

ponentWillReceiveProps(nextProps) {
    //We get the filter which is removed
    let isRemoved = this.props.filters.filter(i => {
        return nextProps.filters.filter(a => {
            return i.searchFilter[0] !== a.searchFilter[0];
        });
    });


    //If something is removed
    if(isRemoved.length > 0){

        let removedFilter = isRemoved[0].searchFilter[0]; //The name of removed filter

        switch (removedFilter){
            case "price":
                this.resetPriceFilter();
            break;
            case "transmission":
                this.resetTransimissionFilter();
            break;
            default:
                console.log("Nothing");
        }

    }
}

resetPriceFilter(){
    this.setState({firstValue: this.state.minValue, secondValue: this.state.maxValue, chcboxValue: false});
    //We update the cars list in the store
    this.updateCarsToShow(this.state.allcars);
}
resetTransimissionFilter(){
    this.setState({chcboxManualValue: false, chcboxAutomaticValue: false});
}

If removedFilter has a value of "transmission" in ponentWillRecieveProps I get two warnings :

1. bundle.js:8335 Warning: There is an internal error in the React performance measurement code. Did not expect ponentDidUpdate timer to start while ponentWillReceiveProps timer is still in progress for another instance.

2. bundle.js:71248 Uncaught TypeError: Cannot read property 'top' of undefined

And also if the state hasn't been updated If removedFilter has a value of "transmission". If I console log something inside that case, it is shown, thus, it is inside that case, but for some reason the state isn't updated.

If removedFilter has a value of "price" then works everything as it should. The state is updated and I don't get any warnings.

• javascript
• reactjs

• try remove ponentWillMount hook, you can set those states in constructor. – xiaofan2406 Commented Nov 18, 2016 at 0:30
• 4 Can you duplicate the error in CodePen or jsFiddle? I tried but I think I'm missing some of your logic as I couldn't replicate. – BradByte Commented Nov 18, 2016 at 3:38

2 Answers 2

I'm not sure, But this Asynchronous behavior may help you.

Here don't use object to set state.

this.setState({
      firstValue: this.state.minValue, 
      secondValue: this.state.maxValue, 
      chcboxValue: false
})

Use function instead

this.setState((prevState, props) => ({
      firstValue: prevState.minValue, 
      secondValue: prevState.maxValue, 
      chcboxValue: false
}));

So try resetTransimissionFilter with

resetTransimissionFilter(){

    this.setState((prevState, prop){
          chcboxManualValue: false, 
          chcboxAutomaticValue: false
   });
}

Because State Updates May Be Asynchronous

The problem may e from the resetPriceFilter and updateCarsToShow, where you try to update the state during "another state update". Try to change the method as below:

Change this:

resetPriceFilter(){
    this.setState({firstValue: this.state.minValue, secondValue: this.state.maxValue, chcboxValue: false});
    //We update the cars list in the store
    this.updateCarsToShow(this.state.allcars);
}

To this:

resetPriceFilter(){
    this.setState({
        firstValue: this.state.minValue,
        secondValue: this.state.maxValue,
        chcboxValue: false
    }, () => {
        //We update the cars list in the store
        this.updateCarsToShow(this.state.allcars);
    });
}

This will run updateCarsToShow after the previous state is done.