我遇到问题的代码部分是:
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”,我会收到两个警告:
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.
bundle.js:71248 Uncaught TypeError: Cannot read property 'top' of undefined
如果 state
还没有更新 如果 removedFilter
的值为 "transmission"
。如果我在那个案例中控制台记录了一些东西,它就会显示出来,因此,它在那个案例中,但由于某种原因,状态没有更新。
如果 removedFilter
的值为 "price"
,则一切正常。 state
已更新,我没有收到任何警告。
最佳答案
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
});
}
关于javascript - React 性能测量代码存在内部错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39289753/