Reactjs Hook onChange with react-datepicker，无效时间值错误答案

【问题标题】：Reactjs Hook onChange with react-datepicker, invalid time value errorReactjs Hook onChange with react-datepicker，无效时间值错误
【发布时间】：2019-10-23 03:12:32
【问题描述】：

我是 react 钩子的新手，我尝试将 react-datepicker 从类转换为带有钩子的函数。问题是当我触发 onChange 时会显示（RangeError: Invalid time value），但默认的“选定”开始日期呈现正常。这可以用钩子完成吗？

 import React, { useState, Fragment } from 'react';
 import Datepicker from 'react-datepicker';

 const Example = () => {

 const [startDate, setStartDate] = useState(new Date());

 const handleChange = date => {
   setStartDate({ startDate: date });
  }

 return (
   <Fragment>
    <Datepicker
     selected={startDate}
     onChange={handleChange}
    />
   </Fragment>
 )
}

export default Example;

我希望 startDate 状态在没有“RangeError: Invalid time value”的情况下更改。

【问题讨论】：

标签： javascript reactjs react-hooks react-datepicker

【解决方案1】：

问题在于您不是在状态中插入日期，而是在对象中。

改变：

setStartDate({ startDate: date });

到：

setStartDate(date);

【讨论】：

哎呀，非常感谢，这确实解决了我的问题。
@FunkeyFlo 然后如何在另一个组件上显示日期。我正在使用 {date} 在另一个组件中显示日期。但它给了我错误。 “对象作为 React 子级无效（发现时间：2020 年 4 月 30 日星期四 13:43:41 GMT+0500（巴基斯坦标准时间））。如果您要渲染一组子级，请改用数组。”

【解决方案2】：

我在我的项目中使用它作为可重用组件

    return (
      <DatePicker
        fixedHeight
        showFullMonthYearPicker
        showDisabledMonthNavigation
        selected={selectedDate}
        value={valueDate}
        onChange={(day) => onChange && onChange(day, flag)}
        className="react-datepicker__input-container-days"
      />
    );
  };

这是我调用我的组件的地方

{renderDateDay({       
          flag: 0,
                                valueDate: manuFucturedValue.day,
                                selectedDate:
                                  (manuFucturedValue.day &&
                                    new Date(manuFucturedValue.day)) ||
                                  null,
                                onChange: (day) =>
                                  handleDateOnchange(day, "day", 0),

【讨论】：