Antd Design中DatePicker组件的初始化问题

最新推荐文章于 2024-01-09 13:37:51 发布

Kyulin151020

最新推荐文章于 2024-01-09 13:37:51 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.youkuaiyun.com/a83370892/article/details/89513614

React 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在React应用中使用DatePicker组件时遇到的问题，即服务端返回的日期格式（YYYYMMDD）在组件初始化时正常显示，但在未操作直接提交时出现错误。通过调整initialValue的设置方式，从提前转换为moment对象改为在initialValue中直接转换格式，解决了提交时的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

有一个Table 里面有一列数据是Date数据，用DatePicker组件展示，

我需要拿到服务端返回来的数据对DatePicker组件进行初始化。

服务端返回来的数据格式如下：YYYYMMDD

一开始的解决方案：

在构造器阶段拿到数据后转换成moment形式的数据

    constructor(props) {
        ....
        this.state = {
            tempData: [], //tempData use for submit
        };
        ...
        this.formatData(tempData);//tempData from Calling Service
        this.setState({
            tempData: tempData,
        })
        ...
    }

    formatData = (list) => {
        if (list != null) {
            for (let i in list) {
                if (list[i]["Date"] != '' && list[i]["Date"] != null)
                    list[i]["Date"] = moment(list[i]["Date"], 'YYYYMMDD');
            }
        }
    }

然后在下面的列表进行render时直接进行初始化：

        const columns = [   
            ..., 
            {
                title: 'Date',
                dataIndex: 'Date',
                key: 'Date',
                width: 125,
                render: (text, record, index) =>

                    <FormItem>
                    {getFieldDecorator("Date" + index, {
                        initialValue: record.EffDate,
                    })(
                    <DatePicker
                        style={{ width: 120 }}
                        onChange={(value) => {
                            this.handleChange(value, record, index, 'Date')
                        }} />)}
                    </FormItem>
            },
            ...
    ]

数据读取下来的时候没有问题

当不对DatePicker进行任何操作提交的时候：报错：

报错原因：看不出来具体原因，希望有大大能知会我，只能看出CalenderWrapper最后去调用locale进行国际化处理，然后报错，因为value.locale不是一个方法

解决方案：

不提前对数据进行类型转换

而改为：

initialValue: moment(record.Date, 'YYYY/MM/DD'),

                    <FormItem>
                    {getFieldDecorator("Date" + index, {
                        initialValue: moment(record.Date, 'YYYY/MM/DD'),
                    })(
                    <DatePicker
                        style={{ width: 120 }}
                        onChange={(value) => {
                            this.handleChange(value, record, index, 'Date')
                        }} />)}
                    </FormItem>

不再报错。

猜测：

提前转换成类型moment的数据可以设置进table中的formitem中，但是当表单提交的时候，这个moment的数据缺少了某些必要属性。

而在 initialValue里面进行赋值的时候，可能这个moment数据还被添加了一些属性，提交能够成功。