使用Ant Design组件库时遇到的坑以及解决方法

前言：使用react开发时，Ant Design是使用最为广泛的组件库之一。但是当我们使用Ant Design时，我们会遇到一些问题，以前遇到但是没有总结过。现在，我打算在以后遇到组件库的问题后，总结一下，目前，先简单总结几个吧。

DatePicker选择器

通过Form表单无法正常获取值,如下图所示。

如此，我们需要使用moment库。
解决示例：

import moment from 'moment';
......

const onFinish = (fieldsValue: any) => {
    const values = {
        ...fieldsValue,
        'birth': fieldsValue['birth'].format('YYYY-MM-DD'),
    };
    console.log('Received values of form: ', values);
}
.....

如此，就能获取到特定的时间字段。另外，如果需要获取到其他格式的时间，可以去moment文档看。

Upload 上传

当Upload的fileList受控后，上传不在列表中的文件不会触发 onChange 后续的 status 更新事件。
如下方为案例所示：上传的文件的status一直是 “uploading”。很显然，这并不是我们需要看到的结果。

解决方案：在change方法中更新fileList
代码示例：

//设置文件初始列表用于受控
const [fileList, setFileList] = useState<any>([])

......
//change事件
const handleChange = (info) => {
     console.log(info)
     const { file, fileList } = info
     setFileList(fileList);
};

.....
<Upload
    action='http://localhost:8000/api/v2/UPOther'
     onChange={handleChange}
     beforeUpload={check}
     fileList={fileList}>
     <Button icon={<UploadOutlined />}>Upload</Button>
 </Upload>

结果如下图所示：我们可以得到当上传文件的状态为done时，从response中获取到后端的的文件地址。

后续遇到坑后继续更新，建议收藏。你们遇到的问题以及解决方案也可以在评论区留下CSDN博客链接，或者私信我，我将在上方进行一一罗列，以便大家能避过这些坑或者问题。