在 React 日期选择器中更改日期时出现问题

Question

在我的表单中，我有 2 个日期选择器，

<DatePicker
onChange={this.onExpiryDateChanged}
clearIcon={null}
calendarIcon={null}
locale={'en-GB'}
value={this.state.expiry_date == null ? new Date() : this.state.expiry_date}/>

和

<DatePicker
onChange={this.onDateChangeDueBy}
clearIcon={null}
calendarIcon={null}
locale={'en-GB'}
value={this.state.review_date == null ? new Date() : this.state.review_date}/>

这些是 onChange 处理程序

onDateChangeDueBy = (date) => {
        debugger;
        let curmonth = parseInt(date.getMonth());
        let currmonth = curmonth + 1;
        var dateStr =
            currmonth >= 10
                ? date.getFullYear() + '/' + currmonth + '/' + date.getDate()
                : date.getFullYear() + '/0' + currmonth + '/' + date.getDate();
        this.setState({due_by: dateStr, review_date: date});
    };

和

onExpiryDateChanged = (date) => {
        debugger;
        let curmonth = parseInt(date.getMonth());
        let currmonth = curmonth + 1;
        var dateStr2 =
            currmonth >= 10
                ? date.getFullYear() + '/' + currmonth + '/' + date.getDate()
                : date.getFullYear() + '/0' + currmonth + '/' + date.getDate();
        this.setState({expiry_due_by: dateStr2, expiry_date: date});
    }

现在，expiry_date 和 review_date 的状态默认设置为空，due_by 和 expiry_due_by 设置为 '1970-01-01'

现在，当从第二个日期选择器更改日期时，它不会抛出任何错误，并且会按预期选择日期，但对于第一个，它会抛出错误，

未捕获错误：Objects 作为 React child 无效（发现时间：2021 年 8 月 27 日星期五 00:00:00 GMT+0530（印度标准时间））。如果您打算渲染 children 的集合，请改用数组

这是演示

编辑：导致问题的日期选择器

{(role === 'fprm' || role === 'admin_manager') &&
                    <React.Fragment>
                        <GeneralLabel>Expiry Date</GeneralLabel>
                        <CSLDateCover>
                            <DatePicker
                                onChange={this.onExpiryDateChanged}
                                clearIcon={null}
                                calendarIcon={null}
                                locale={'en-GB'}
                                id="date"
                                name="date"
                                value={this.state.expiry_date === null ? new Date() : this.state.expiry_date}/>
                        </CSLDateCover>
                    </React.Fragment>
                    }

Answer 1

我认为问题出在 DatePicker 的条件渲染上。我建议您以这种方式修改您的代码：

return (
{(role === 'fprm' || role === 'admin_manager') && (this.state.curlane === 'COMP_FINPROMO_CONFIRMED' || this.state.curlane === 'COMP_FINPROMO_REVIEW_REQUIRED') && this.state.isEnabledExpiryDate && 
   <React.Fragment>
      <GeneralLabel>Expiry Date</GeneralLabel>
         <CSLDateCover>
            <DatePicker
               onChange={this.onExpiryDateChanged}
               clearIcon={null}
               calendarIcon={null}
               locale={'en-GB'}
               id="date"
               name="date"
               value={this.state.expiry_date === null ? new Date() : this.state.expiry_date} />
         </CSLDateCover>
   </React.Fragment>     
 }
);

在 React 日期选择器中更改日期时出现问题

Problem while changing date in React date picker

reactjs

react-datepicker