react日期选择器中的日期对象未保存

Question

为即将看到的代码的可憎之处提前道歉。。。

我对React和编程相对较新，我正在尝试创建一个带有React钩子形式的MERN应用程序来简化流程。我遇到问题的组件是编辑部分。我无法弄清楚如何处理hooks表单中的受控输入，所以我试图通过使用state将值存储在两个不同的状态来规避这个问题，我意识到这违背了使用hooks表单的目的。

到目前为止，除了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日期选择器与react钩子表单一起使用，您需要使用react钩子窗体的Controller组件。此处参考：集成受控输入。

以下组件声明说明了将react日期选择器datepicker组件封装在react钩子表单控制器组件中。它使用control={control}注册到react hook表单，然后在Controller组件render道具中呈现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表单的注册输入的值。

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

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

这是一个正在工作的沙盒。

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

我最终发现了问题所在。更新路由中存在拼写错误，导致无法记录字段。我能够用几乎完全相同的代码使它工作。

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