React antd 报错TypeError: e.isAfter is not a function 及类似原因总结

这个问题是在保存高级搜索条件时报的错，经检查是这段代码报的错

给出类似代码

import React, {useEffect} from 'react';
import {Form,DatePicker,} from 'antd';
function example(){
	const [form] = Form.useform();
	useEffect(()=>{
		....
		//searchdata是按原样用form.getFieldsValue()保存的
		let tempdata=JSON.parse(localStorage.getItem('searchdata'))
		form.setFieldsValue(tempdata)
	},[])
	
	return(
		<div>
			<Form form={form}>
			    ...
				<Form.Item name="date" label="日期">
                  <DatePicker.RangePicker />
                </Form.Item>
                ...
			</Form>
		</div>
	)
}
export default example;

运行测试

然后就报错了
TypeError: e.isAfter is not a function

经过测试
只有想要设置date时，才会出现这个错

单独运行看看

useEffect(()=>{
		....
		form.setFieldsValue({date:["2021-04-01T06:15:33.549Z", "2021-04-30T06:15:33.549Z"]})
	},[])

果然，报错TypeError: e.isAfter is not a function

再回去看官网文档

参数	说明	类型	默认值
defaultValue	默认日期	moment[]	-

可以看出需要moment类型

那么再试一下

import moment from 'moment';
useEffect(()=>{
		....
		let tempdata=[]
		tempdata.push(moment("2021-04-01T06:15:33.549Z"))
		tempdata.push(moment("2021-04-30T06:15:33.549Z"))
		form.setFieldsValue({date:tempdata})
	},[])

成功显示了

得注意多看文档啊

总结一下TypeError: “x” is not a function这类问题出现的原因：

1. 函数名称写错
2. 调用Object对象没有这个方法
3. 某个属性和某个方法的名称相同
4. 使用括号进行乘法运算
5. 错误地导入和导出模块
6. 使用的数据类型错误（类似上面例子的情况）

想看更多信息，可以点这里

当然，也要多练练找bug的能力hhh，知道原因找不到地方也很头秃

如果帮助到你，能点个赞吗？