获取 RangeError: Invalid Time Value when using React datepicker答案

【问题标题】：Getting a RangeError: Invalid Time Value when using React datepicker获取 RangeError: Invalid Time Value when using React datepicker
【发布时间】：2019-11-25 17:10:09
【问题描述】：

我已经使用 react-datepicker 库设置了一个 DatePicker 组件，并将使用今天的日期以 MM-DD-YYYY 格式计算的初始日期值传递给它。

但是，当我在 React 中加载页面时，我得到了

RangeError: 无效的时间值

const AuthForm = ({ buttonText, formType, onAuth, history, ...props }) => {

  const startDate = new Date().toLocaleDateString();

  const initialStateSignup = {
      email : "",
      password : "",
      firstName: "",
      lastName: "",
      gender: "",
      dob: startDate
  };
    const [state , setState] = useState(formType === 'login' ? initialStateLogin : initialStateSignup);

  const handleChange = e => {
      const {name , value} = e.target;
      setState( prevState => ({
          ...prevState,
          [name] : value
      }))
  }
  ...
  return (
     <DatePicker
        placeholderText="Date of Birth"
        selected={state.dob}
        onChange={handleChange}
      />
  )

这个错误来自哪里？我在控制台记录了 startDate，它看起来对我有效，这是我在其他线程中看到的用于生成开始日期的方法。

【问题讨论】：

标签： reactjs datepicker

【解决方案1】：

根据这篇文章https://github.com/Hacker0x01/react-datepicker/issues/1752，您很可能使用旧版本的日期选择器，这也可能与您的 React 环境不完全一致。

所以检查你的 react-datepicker 版本，如果需要升级到 2+，并使用这个语法：

const selected = moment(isoDateStr).toDate();

这是因为版本 2 之前的 react-datepicker 直接使用 moment 对象日期类型，并且版本 2+ 使用 javascript 日期类型。

【讨论】：

【解决方案2】：

只需传递给你的 DatePicker 组件 dateFormat="MM-DD-YYYY" 属性，使用你想要的格式。

https://reactdatepicker.com/#example-7

<DatePicker
  dateFormat="MM-DD-YYYY"
  selected={this.state.startDate}
  onChange={this.handleChange} 
/>

P.D.如果您的状态是一个对象，您想使用useReducer 而不是useState。

【讨论】：