web-dev-qa-db-ja.com

RangeErrorの取得：React datepickerを使用すると無効な時間値

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のログを記録しましたが、それは私には有効であるように見えます。これは、開始日を生成するために他のスレッドで文書化されている方法です。

reactjsdatepicker
6
ipenguin67

DatePickerコンポーネントに渡すだけですdateFormat="MM-DD-YYYY" prop、必要なフォーマット.

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

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

P.D.状態がオブジェクトの場合は、useReducerではなくuseStateを使用します。

0
Adolfo Onrubia