场景:
在react使用antd的Datepicker组件,并将其value值绑定为state中的值
由于state中的formData包括其他的表单数据,所以在Datepicker调用onChange时,先把fromData深拷贝了(使用的方法为JSON.parse(JSON.stringify(formData))
)一份为copyFormData,然后将现在的字段和对应值赋值给formData:copyFormData,然后再setState({formData:copyFormData})
问题出现了,改变Datepicker的值看不出问题,但是改变其他表单的值时就出现报错:
打印改变日期选择器的值时其对应的value和改变其他表单数据时日期选择器对应的value值:
发现由于使用了JSON.parse(JSON.stringify())
这种方法将时间选择器的value值由moment对象变成了一个字符串,所以导致了报错。
想的解决方案是,既然把时间变成了字符串,那么再把它变回成相应的moment对象。
import moment from 'moment'
//saveForm方法
saveForm = (e: any, key: string) => {
const { formData } = this.state
let copyFormData = JSON.parse(JSON.stringify(formData))
copyFormData[key]['value'] = e.target ? e.target.value : e
if (typeof copyFormData.nearestTime.value === 'string'){
copyFormData.nearestTime.value = moment(copyFormData.nearestTime.value,'YYYY-MM-DD')
}
this.setState({
formData: copyFormData
})
}
奇怪的问题又发生了,现在不报错了,但是每修改一次其他表单数据,datepicker的值都会往减少一天(准确来说是第一次没有减少一天只减少了8小时,后面也不是减少24小时但是最终的日期确实是前一天)
问题出现在给moment()方法提供的第二个参数
删除这个参数即可。
saveForm = (e: any, key: string) => {
const { formData } = this.state
let copyFormData = JSON.parse(JSON.stringify(formData))
copyFormData[key]['value'] = e.target ? e.target.value : e
if (typeof copyFormData.nearestTime.value === 'string'){
//注意这里如果给moment()传入第二个参数,则转化后时间会变
copyFormData.nearestTime.value = moment(copyFormData.nearestTime.value)
}
this.setState({
formData: copyFormData
})
}