Có một lỗi nội bộ trong các mã đo Phản ứng hiệu suất

Question

Phần mã nơi tôi có một vấn đề là:

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

Nếu removedFilter có giá trị là "truyền" trong componentWillRecieveProps tôi nhận được hai cảnh báo:

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

Và cũng có thể nếu state chưa được cập nhật Nếu removedFilter có giá trị là "transmission". Nếu tôi giao diện điều khiển đăng nhập một cái gì đó bên trong trường hợp đó, nó được hiển thị, do đó, nó là bên trong trường hợp đó, nhưng đối với một số lý do nhà nước không được cập nhật.

Nếu removedFilter có giá trị là "price" thì hoạt động mọi thứ như mong muốn. state được cập nhật và tôi không nhận được bất kỳ cảnh báo nào.

Answer 1

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

Ở đây không sử dụng đối tượng để đặt trạng thái.

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

Sử dụng chức năng thay vì

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

Vì vậy, cố gắng resetTransimissionFilter với

resetTransimissionFilter(){ 

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

Vì State Updates May Be Asynchronous

Answer 2

Sự cố có thể đến từ số resetPriceFilter và updateCarsToShow, nơi bạn cố gắng cập nhật trạng thái trong "cập nhật trạng thái khác". Hãy thử thay đổi phương pháp như sau:

Thay đổi này:

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

Để này:

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

này sẽ chạy updateCarsToShowsau trạng thái trước đó được thực hiện.