来自react-datepicker的日期对象未保存

问题描述

为您将要看到的代码的可憎性预先道歉...

我一般对React和编程都不熟悉，所以我试图创建一个带有react-hooks-form的MERN应用程序以简化流程。我遇到的组件是编辑部分。我无法弄清楚如何以钩子形式处理受控输入，因此我尝试通过使用状态将值存储在两个不同的状态中来规避该问题，这实现了使用钩子形式的目的。

到目前为止，除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> 
    )
}

为什么会出现这种情况？除此之外，任何有关如何重构代码的见识都将有所帮助。

解决方法

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

以下组件声明说明了将react-datepicker DatePicker组件包装在react-hook-form控制器组件中。它使用control={control}在react-hook-form中注册，然后在Controller组件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状态来控制其值，但是我们可以使用相同的处理程序来使用setValue()为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,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",{
      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)

,

我最终弄清楚了什么地方出了问题。更新路径中有一个错字，导致该字段无法记录。我能够用几乎完全相同的代码来工作。

我很抱歉没有彻底了解它们。