如何解决当在DateRangePicker中选择新的Date时,反应更新状态导致无限循环
每次尝试选择报告时,我都尝试从DateRangePicker更改默认的Start(开始)和End(结束),同时允许在DateRangePicker期间进行修改。首先想到的是使用React生命周期,并在每次选择状态时更新状态,但这会导致React出现无限循环,因为此组件的更新非常昂贵。
componentDidUpdate(prevProps,prevState,snapshot) {
console.log('update',prevProps.GridManagerReducer.orderStartDate !== this.props.ActivityReportsReducer.date_start_range)
if (prevProps.GridManagerReducer.orderStartDate !== this.props.ActivityReportsReducer.date_start_range){
this.setState({ startDate:moment(this.props.ActivityReportsReducer.date_start_range),endDate:moment(this.props.ActivityReportsReducer.date_include_range) },() =>
this.props.actions.setOrderStartDate(moment(this.props.ActivityReportsReducer.date_start_range)),() => this.props.actions.setEndDate(moment(this.props.ActivityReportsReducer.date_include_range)) );
this.props.actions.setOrderEndDate(moment(this.props.ActivityReportsReducer.date_include_range))
this.handleDatePickerChange(moment(this.props.ActivityReportsReducer.date_start_range),moment(this.props.ActivityReportsReducer.date_include_range))
}
}
DateRangePicker
<DateRangePicker
startDate={this.state.startDate}
endDate={this.state.endDate}
onDatesChange={({ startDate,endDate }) => {
this.handleDatePickerChange(startDate,endDate);
}}
focusedInput={this.state.focusedInput}
onFocusChange={focusedInput => this.setState({ focusedInput })}
isOutsideRange={this.isOutsideRange}
disabled={loading}
minimumNights={0}
/>
handleDatePickerChange = (startDate,endDate) => {
console.log(startDate)
this.setState({ startDate,endDate })
};
有什么想法或建议吗?
我也尝试了static getDerivedStateFromProps
,它确实更改了默认的开始日期和结束日期,但不允许选择时更改DateRangePicker(默认为dereivedStateFromProps。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。