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

【问题标题】：Problem while changing date in React date picker在 React 日期选择器中更改日期时出现问题
【发布时间】：2021-10-10 12:51:35
【问题描述】：

在我的表单中，我有 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 的状态都默认设置为 null 并且 due_by 和 expiry_due_by 设置为 '1970-01-01'

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

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

这里是演示

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

{(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>
                    }

【问题讨论】：

我认为问题出在 HTML 而不是逻辑上。你能发布这个组件的回报吗？
你能提供一个sn-ps吗？或者至少是你的组件的渲染
@GiovanniEsposito 嗨，先生，如果我使用您的答案并修改代码，即简化条件语句，那么它正在呈现，让我发布我所做的。请再看一遍，请说出需要做什么才能使条件渲染满足所有 && 和 ||
@JeromeTaylor 在您的情况下，请检查每个等式是否用=== 表示。我没有任何其他建议。如果条件没有返回你想要的，通过创建一个连接到按钮的函数来调试它并检查结果（放置一些 console.log）
感谢@GiovanniEsposito 先生您的时间和努力，真的很有帮助！

标签： reactjs react-datepicker

【解决方案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>     
 }
);

【讨论】：