配置
react 17.0.1
antd 4.15.0
想实现的效果
用户点击“修改个人信息”按钮,原出生日期数据回显到antd
组件DatePicker
中。而出生日期字段birthDate
是表单上所有数据userInfo
的一个属性。
报错信息
报错代码
showModal = () => {
const { userInfo } = this.state;
this.setState({
visibleInfo: true,
});
// 设置100毫秒的延迟 确保from组件已经加载完毕
setTimeout(() => {
this.infoFormRef.current.setFieldsValue(userInfo);
}, 100);
};
报错原因
DatePicker不能接收字符串,只能接收moment
类型的值。
解决办法
1.在赋值之前将birthDate
数据转成moment
类型
2.先赋值birthDate
3.移除userInfo
中的birthDate
属性
4.在赋值userInfo
showModal = () => {
const { userInfo } = this.state;
let { birthDate } = this.state.userInfo;
birthDate = moment(birthDate);
this.setState({
visibleInfo: true,
});
// 设置100毫秒的延迟 确保from组件已经加载完毕
setTimeout(() => {
this.infoFormRef.current.setFieldsValue({ birthDate });
delete userInfo.birthDate
this.infoFormRef.current.setFieldsValue(userInfo);
}, 100);
};
说明
本人react初学者,这种方法也就是本菜狗解决问题的笨方法,重点是记录问题出现的原因,为各位提供一下思路,一定有更好,更方便的方法。