当在DateRangePicker中选择新的Date时,反应更新状态导致无限循环

时间:2020-09-24 20:20:14

标签: javascript reactjs react-redux react-datepicker

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

0 个答案:

没有答案