在React性能度量代码中有一个内部错误

There is an internal error in the React performance measurement code

本文关键字：有一个 内部 错误 代码 React 性能 度量      更新时间：2023-09-26

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

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警告:React性能测量代码中存在内部错误。没有期望componentdiduupdate定时器当componentWillReceiveProps计时器仍在进行时启动

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

并且如果state没有更新，如果removedFilter的值为"transmission"。如果我在那个情况下控制台记录一些东西，它被显示出来，因此，它在那个情况下，但由于某种原因，状态没有更新。

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

我不确定，但是这个异步行为可能会帮助你。

这里不要使用object来设置状态 

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 with

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

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

问题可能来自resetPriceFilter和updateCarsToShow，您试图在"另一个状态更新"期间更新状态。尝试更改方法，如下所示:

改变:

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

: 

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

这将在之前的状态完成后运行updateCarsToShow

相关文章：