React性能测量代码中存在内部错误

Question

我遇到问题的代码部分是:

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);
}

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

componentWillReceiveProps(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});
}

如果removedFiltercomponentWillRecieveProps中的值为"transmission",我会收到两条警告:

1. bundle.js:8335警告:React性能测量代码中存在内部错误.不期望componentDidUpdate计时器在另一个实例的componentWillReceiveProps计时器仍在进行时启动.

2. bundle.js:71248未捕获的TypeError:无法读取未定义的属性"top"

并且如果state尚未更新,removedFilter则具有值"transmission".如果我在这种情况下控制日志,它会显示出来,因此,它就在这种情况下,但由于某种原因,状态不会更新.

如果removedFilter有一个值,"price"则可以正常工作.将state被更新,我没有得到任何警告.

Answer 1

我不确定，但是这种异步行为可能会对您有所帮助。

这里不使用对象来设置状态。

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

使用函数代替

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

所以尝试使用resetTransimissionFilter

resetTransimissionFilter(){

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

因为状态更新可能是异步的