每次尝试选择报告时,我都尝试从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。