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的值为＆＃34;传输＆＃34;在componentWillRecieveProps中，我收到两个警告：

bundle.js：8335警告：React性能测量代码中存在内部错误。没想到componentDidUpdate计时器   在componentWillReceiveProps计时器仍在进行时启动   另一个例子。



bundle.js：71248 Uncaught TypeError：无法读取属性＆＃39; top＆＃39;未定义的

如果state尚未更新，则removedFilter的值为"transmission"。如果我在这种情况下控制日志，它会显示出来，因此，它就在这种情况下，但由于某种原因，状态没有更新。

如果removedFilter的值为"price"，则按预期工作。 state已更新，我没有收到任何警告。

Answer 1

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

此处不使用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

resetTransimissionFilter(){

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

因为 State Updates May Be Asynchronous

Answer 2

问题可能来自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 。

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

2 个答案: