antd Datepicker组件——date.clone is not a function

目前下来，遇到这个报错好几次了，大致总结一下出现的情况和解决方法

1. 日期格式转换

可参照 推荐博文 中：4、日期处理函数，5、moment.js JavaScript 日期处理类库

2. DatePicker 中回显数据

背景说明：根据返回的 json 数据（格式：[{}, {}, …]），通过 map 函数循环显示所有数据项，其中包含日期类型数据，需要回显到 DatePicker 中

2.2 主要部分

关于日期在 Datepicker 中回显，默认值有三种方式：defaultValue、value、initValue，要求的参数格式为 moment。因此在数据回显时，一般都需要将日期转换成 moment 格式。

需要注意的是：默认值会在页面渲染的时候就渲染在 Form.Item 中，但是一般数据请求拿到返回值存在异步，会晚于渲染，因此日期格式转换的操作不能放在 DatePicker 中，下面这些处理方式是不对的

1.
dom = <DatePicker value={moment(formBaseData.startDate)} style={{ width: 300 }} />

2.
dom = <DatePicker value={moment(formBaseData.startDate?formBaseData.startDate.format():null)} style={{ width: 300 }} />

3.
dom = <DatePicker defaultValue={moment("2020-01-07T00:00:00", 'yyyy-mm-dd')} style={{ width: 300 }} />

正确的日期处理，应该放在获取数据之后：
1、拿到数据之后，对数据进行格式处理，转换成 moment 格式

formBaseData = {
  startDate: editData.startDate ? moment(editData.startDate) : null
}
formBaseData = { ...editData, ...formBaseData }
form.setFieldsValue(formBaseData)

2、将格式修改之后的数据绑定到 DatePicker 中

dom = <DatePicker value={data.dataIndex} style={{ width: 300 }} />

效果图：

2.3 完整代码

代码：form 表单显示

return (
	<Form labelCol={{ span: 10 }} wrapperCol={{ span: 25 }} layout="inline" size="small"
        form={form} initialValues={{ modifier: 'public' }}
        onChange={()=>{
          let values = form.getFieldsValue()
          changeSubmitData(values, 'editData')
        }}
      >
        {
          formData.map((obj, index) => {
            return (
	            <Form.Item 
	              name={obj.dataIndex}
	              label={obj.title}
	              key={index}
	              style={{ marginTop: 10, width: '45%' }}
	            >
	              {inputType(obj)}
	            </Form.Item>)
          })
        }
      </Form>
)

代码：数据项处理

const inputType = (data: any) => {
  let dom;let select1,select2,select3,select4;
  if (data.type && isEdit) {
    switch (data.type) {
      case 'select':
        dom = <Select value={editData.guardDeptName} showSearch onChange={(value, option) => selectChange(value, option, data.title)} style={{ width: 300 }}>
                { guarderDeptData.map((item) => <Select.Option key={item.id} id={item.id} value={item.name}>{item.name}</Select.Option>) }
              </Select>
        break;
      case 'date':
        dom = <DatePicker value={data.dataIndex} style={{ width: 300 }} />
        break
      case 'Radio':
        dom = <Radio.Group>
                <Radio value='是'>是</Radio>
                <Radio value='否'>否</Radio>
              </Radio.Group>
        break
    }
  } else {
    return <Input readOnly={!isEdit} style={{ width: 250 }} />
  }
  return dom
}


formBaseData = {
  isPre: editData.isPre == null ? '' : (editData.isPre == 0 ? '否' : '是'),
  isJoin: editData.isJoin == null ? '' : (editData.isJoin == 0 ? '否' : '是'),
  isTjzjfx: editData.isTjzjfx == null ? '' : (editData.isTjzjfx == 0 ? '否' : '是'),
  // startDate: editData.startDate ? editData.startDate.split('T')[0] : ''
  startDate: editData.startDate ? moment(editData.startDate) : null
}
formBaseData = { ...editData, ...formBaseData }
form.setFieldsValue(formBaseData)