使用 react-hook-form Controller 反应 Datepicker 在表单提交上输出未定义。 从 props 传递的起始值

Question

我在 react-hook-form 的 Controller 中使用 react-datepicker。 我将 props 的开始日期传递给我的表单组件，然后我使用 useState 将该 prop 值存储在组件 state 中。 变量的类型似乎是日期 object，但我不明白为什么在提交表单时将其用作 Datepicker 上的选定值会导致该值返回未定义。 我没有点击 Datepicker。 提交带有初始值的表单时会出现此未定义的问题。 如果我更改它的值并提交表单，它会按预期返回日期 object。 如果用户不进行任何更改，我希望它返回一个值。 它应该使用提供的初始值提交，而不是未定义。

我有两个日期条目。 如果我不为其提供起始值，则结束日期组件将起作用。 我已经删除了表格中与这个问题无关的其他部分。

我正在使用 react-hook-form v 7.29.0、react-datepicker v 4.7.0 和 react v 18.0。 这个最新版本的日期选择器显然不再使用时刻，而只是使用内置日期方法，所以我不确定我提供的开始日期 object 有什么问题。 有人可以就导致它返回未定义的原因提供一些指导/理解吗？

谢谢，代码如下：

import React, { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import DatePicker from 'react-datepicker';

export default function EmployeeCard(props) {
  const { register, handleSubmit, control } = useForm();
  const employeeStartDateModified =new Date(props.employee.startDate);

  const modifiedProps = {
    ...props.employee,
    startDate: employeeStartDateModified,
  };

  const [employeeData, setInputValues] = useState(modifiedProps);

  let { firstName, middleName, lastName, salary, active, startDate, id, ptoBalance } =
    employeeData;

  const handleOnChange = event => {
    const { name, value } = event.target;
    setInputValues({ ...employeeData, [name]: value });
  };

  // did new state for startDate to see if the object would fix the undefined issue
  const [newStartDate, setNewStartDate] = useState(new Date(startDate));

  const onSubmit = registerData => {
    console.log(registerData); //other components of form show values, except startDate shows undefined. As soon as I change it from its initial value it console logs the date object. Same for endDate, which has no starting value. Entering a value in it and submitting returns the date object. Start date only returns undefined when provided the initial value in selected={}.
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className='centered-container-form'
      key={id}
    >
      <div className='form-group'>
        <label htmlFor='startDate'>Start Date</label>
        <Controller
          control={control}
          name='startDate'
          render={({ field: { value = newStartDate, onChange } }) => (
            <DatePicker
              onChange={date => {
                setNewStartDate(date);
                onChange(newStartDate);
              }}
              selected={value}
              dateFormat='MM/dd/yyyy'
              required
            />
          )}
        />
      </div>
      <div className='form-group'>
        <label htmlFor='endDate'>End Date</label>
        <Controller
          control={control}
          name='endDate'
          render={({ field }) => (
            <DatePicker
              onChange={date => field.onChange(date)}
              selected={field.value}
              dateFormat='MM/dd/yyyy'
            />
          )}
        />
      </div>
      <button type='submit' className='btn btn-outline-primary'>
        Update
      </button>
    </form>
  );
}

Answer 1

Tive o mesmo questiona aqui, também estou utilizando DatePicker com TextField do MUI 。 Consegui resolver o problema definindo um valor default dentro de um object defaultValues dentro do useForm。

import { TextField } from "@mui/material";
import { Controller, useForm } from "react-hook-form";
import { DatePicker } from "@mui/x-date-pickers";

export default function Page() {
  const { handleSubmit, control } = useForm({
    defaultValues:{
    // Seus valores passando o name do input que quer definir o valor
      dataInicial: new Date()
    }
  });

  const registrar = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(registrar)}>
      <Controller
        control={control}
        name="dataInicial"
        render={({ field: { onChange, onBlur, value, name, ref } }) => {
          return (
            <DatePicker
              onBlur={onBlur} 
              onChange={onChange}
              value={value}
              inputRef={ref}
              renderInput={(params) => <TextField {...params} />}
            />
          );
        }}
      />
      <button type="submit">Registrar</button>
    </form>
  );
}