antd DatePicker报错date.clone is not a function

场景:
在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 
        })

    }
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值