来自 react-datepicker 的日期对象没有被保存

Question

对于您将要看到的令人憎恶的代码提前致歉...

总的来说，我对 React 和编程还比较陌生，我正在尝试使用 react-hooks-form 创建一个 MERN 应用程序以简化流程。我有问题的组件是编辑部分。我无法弄清楚如何处理 hooks-form 中的受控输入，所以我试图通过使用 state 将值存储在两个不同的状态来规避这个问题，我意识到这违背了使用 hooks-forms 的目的。

目前一切正常，除了 dateOfBirth 是必填字段。提交时，我收到 400 错误并提示 dateOfBirth 是必需的。

export default function EditMember(props) {

    const [date, setDate] = useState(null);
    const [member, setMember] = useState({
        firstName: '',
        lastName: '',
        dateOfBirth: null,
        gender: '', 
        address: '',
        phoneNumber: ''
    })


    const onChangeDate = date => {
        setDate(date)
    }

    useEffect(() => {
        axios.get(`http://localhost:5000/members/${props.match.params.id}`)
            .then(res => {
                setMember({
                    firstName: res.data.firstName,
                    lastName: res.data.lastName,
                    dateOfBirth: Date.parse(res.data.dateOfBirth),
                    address: res.data.address,
                    phoneNumber: res.data.phoneNumber,
                    gender: res.data.gender
                });
            })           
    }, [])

    useEffect(() => {
        axios.get(`http://localhost:5000/members/${props.match.params.id}`)
            .then(res => {
                setDate(res.data.dateOfBirth);
            })
    }, []);

    const { register, handleSubmit } = useForm();

    const onSubmitData = data => {
        const updatedMember = {
            firstName: data.firstName,
            lastName: data.lastName,
            dateOfBirth: date,
            address: data.address,
            phoneNumber: data.phoneNumber,
            gender: data.gender,
        } 
        axios.post(`http://localhost:5000/members/update/${props.match.params.id}`, updatedMember)
            .then(res => console.log(res.data))
    }

    return (
            <form onSubmit={handleSubmit(onSubmitData)}>
                <div>
                    <input 
                        type="text" 
                        name="firstName" 
                        defaultValue={member.firstName}
                        placeholder="First name" 
                        ref={register} 
                    />
                    <input 
                        type="text" 
                        name="lastName" 
                        defaultValue={member.lastName}
                        placeholder="Last name" 
                        ref={register} 
                    />
                    <span>Male</span>
                    <input 
                        type="radio" 
                        value="Male" 
                        name="gender"
                        ref={register}
                    /> 
                    <span>Female</span> 
                        <input 
                        type="radio" 
                        value="Female" 
                        name="gender" 
                        ref={register} 
                    /> 
                    <input 
                        type="text" 
                        name="address" 
                        placeholder="Address" 
                        ref={register}
                        defaultValue={member.address}
                    <input  
                        type="text" 
                        name="phoneNumber" 
                        placeholder="Phone Number" 
                        ref={register} 
                        defaultValue={member.phoneNumber}
                    />
                    <DatePicker
                        selected = {member.dateOfBirth}
                        onChange = {onChangeDate} 
                        placeholderText="Select date"   
                    />
                    <button type="submit">Edit Log</button>
            </form> 
    )
}

发生这种情况的原因是什么？除此之外，任何关于如何重构代码的见解都会有所帮助。

Answer 1

为了将 react-datepicker 与 react-hook-form 一起使用，您需要使用 react-hook-form 的控制器组件。此处参考：Integrating Controlled Inputs.

以下组件声明说明了将 react-datepicker DatePicker 组件包装在 react-hook-form Controller 组件中。它使用 control={control} 在 react-hook-form 注册，然后在控制器组件 render prop.

中呈现 DatePicker

const { register, handleSubmit, control, setValue } = useForm();

//...

<Controller
  name="dateOfBirth"
  control={control}
  defaultValue={date}
  render={() => (
    <DatePicker
      selected={date}
      placeholderText="Select date"
      onChange={handleChange}
    />
  )}
/>

DatePicker 仍然需要使用 handleChange 和 date 状态来控制它的值，但是我们可以使用相同的处理程序使用 [=20= 更新 react-hook-form 的注册输入值].

const handleChange = (dateChange) => {
  setValue("dateOfBirth", dateChange, {
    shouldDirty: true
  });
  setDate(dateChange);
};

您的完整组件（没有 API 调用）可能如下所示。 onSubmitData() 由 react-hook-form 的 handleSubmit() 调用，此处记录表单的输出，包括更新的 DatePicker 值。

这是一个有效的 sandbox。

import React from "react";
import "./styles.css";
import { useForm, Controller } from "react-hook-form";
import DatePicker from "react-datepicker";

export default function App() {
  return (
    <div className="App">
      <EditMember />
    </div>
  );
}

function EditMember() {
  const { register, handleSubmit, control, setValue } = useForm();
  const [date, setDate] = React.useState(new Date(Date.now()));

  const onSubmitData = (data) => {
    console.log(data);
    
    // axis.post(
    //   `http://localhost:5000/members/update/${props.match.params.id}`,
    //    data).then(res => console.log(res.data))
  }

  const handleChange = (dateChange) => {
    setValue("dateOfBirth", dateChange, {
      shouldDirty: true
    });
    setDate(dateChange);
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmitData)}>
        <input
          type="text"
          name="firstName"
          placeholder="First name"
          ref={register}
        />
        <input
          type="text"
          name="lastName"
          placeholder="Last name"
          ref={register}
        />
        <span>Male</span>
        <input type="radio" value="Male" name="gender" ref={register} />
        <span>Female</span>
        <input type="radio" value="Female" name="gender" ref={register} />
        <input
          type="text"
          name="address"
          placeholder="Address"
          ref={register}
        />
        <input
          type="text"
          name="phoneNumber"
          placeholder="Phone Number"
          ref={register}
        />
        <Controller
          name="dateOfBirth"
          control={control}
          defaultValue={date}
          render={() => (
            <DatePicker
              selected={date}
              placeholderText="Select date"
              onChange={handleChange}
            />
          )}
        />

        <button type="submit">Edit Log</button>
      </form>
    </div>
  );
}

输出

//Output

Object {firstName: "First", lastName: "Last", gender: "Male", address: "Addy", phoneNumber: "fon"…}
 firstName: "First"
 lastName: "Last"
 gender: "Male"
 address: "Addy"
 phoneNumber: "fon"
 dateOfBirth: Wed Aug 19 2020 17:20:12 GMT+0100 (BST)

Answer 2

我终于弄清楚出了什么问题。更新路线中有一个拼写错误，导致该字段无法被记录。我能够使用几乎完全相同的代码让它工作。

很抱歉没有仔细阅读它们。

来自 react-datepicker 的日期对象没有被保存

Date object from react-datepicker not getting saved

reactjs

mern

react-datepicker

react-hooks