如何解决来自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)
我最终弄清楚了什么地方出了问题。更新路径中有一个错字，导致该字段无法记录。我能够用几乎完全相同的代码来工作。
我很抱歉没有彻底了解它们。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。