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

如果 removedFilter 在 componentWillRecieveProps 中的值为“transmission”，我会收到两个警告:

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

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

如果 state 还没有更新 如果 removedFilter 的值为 "transmission"。如果我在那个案例中控制台记录了一些东西，它就会显示出来，因此，它在那个案例中，但由于某种原因，状态没有更新。

如果 removedFilter 的值为 "price"，则一切正常。 state 已更新，我没有收到任何警告。

Answer 1

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

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

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

因为 State Updates May Be Asynchronous