Wystąpił błąd wewnętrzny w React wydajności kodu pomiaru

Question

Część kodu, w którym mam problem jest:

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

Jeśli removedFilter ma wartość „transmisji” w componentWillRecieveProps mam dwa ostrzeżenia:

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

A także jeśli state nie został zaktualizowany Jeśli removedFilter ma wartość "transmission". Jeśli konsola loguje coś wewnątrz tego przypadku, jest pokazywana, więc znajduje się w tym przypadku, ale z jakiegoś powodu stan nie jest aktualizowany.

Jeśli removedFilter ma wartość "price", to wszystko działa tak, jak powinno. Numer state został zaktualizowany i nie otrzymuję żadnych ostrzeżeń.

Answer 1

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

Tutaj nie używamy obiektu do ustawienia stanu.

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

Zastosowanie funkcji zamiast

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

Więc spróbuj resetTransimissionFilter z

resetTransimissionFilter(){ 

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

Ponieważ State Updates May Be Asynchronous

Answer 2

Problem może pochodzić od resetPriceFilter i updateCarsToShow, gdzie próbujesz zaktualizować stan podczas "kolejnej aktualizacji stanu". Spróbuj zmienić metodę jak poniżej:

Zmień to:

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

do tego:

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

ten będzie działał updateCarsToShowpo poprzedni stan jest wykonywana.