使用antd中的RangePicker组件时，出现“没有与此调用匹配的重载”的错误怎么办？

本文介绍: 其实很多时候时ts 语法机制问题，主要是类型匹配上不，将这些类型改写成any 即可。为什么有的时候可以按照官网用不出错，有时又会出错呢？因为项目中使用的版本不一。

原因 分析

其实很多时候是ts 语法机制问题，主要是类型匹配上不，将这些类型改写成any 即可。
为什么有的时候可以按照官网用不出错，有时又会出错呢？因为项目中使用的版本不一。
如何解决？请看下面：

1.antd 官网 源码

  const { RangePicker } = DatePicker
  const dateFormat = 'YYYY-MM-DD'
  type RangeValue = [Dayjs | null, Dayjs | null] | null
  const [dates, setDates] = useState<RangeValue&gt;(null)
  const [value, setValue] = useState<RangeValue&gt;(null)
//设置可选范围最大为15天
  const disabledDate = (current: Dayjs) => {
    if (!dates) {
      return false
    }
    const tooLate = dates[0] &amp;&amp; current.diff(dates[0], 'days') > 15
    const tooEarly = dates[1] &amp;&amp; dates[1].diff(current, 'days') > 15
    return !!tooEarly || !!tooLate
  }
  //每次选择清空上一次记录
  const onOpenChange = (open: boolean) => {
    if (open) {
      setDates([null, null])
    } else {
      setDates(null)
    }
  }
  //获取日期范围字符串
  const onCalendarChange = (val: any) => {
    setDates(val)
    try {
      let start = moment(val[0].valueOf()).format('YYYY-MM-DD')
      console.log(start)
      setstartdate(start)
      if (val[1] !== null || val[1] !== undefined) {
        let end = moment(val[1].valueOf()).format('YYYY-MM-DD')
        console.log(end)
        setenddate(end)
      }
    } catch (e) {
      message.error('请按顺序输入起始日期！')
    }
  }
//日期选择组件
  const operations = (
    <div>
        <RangePicker
          locale={locale}
          allowClear={false}
          defaultValue={[
            dayjs('2022-09-03', dateFormat),
            dayjs('2022-09-18', dateFormat),
          ]}
          value={dates || value}
          disabledDate={disabledDate}
          onCalendarChange={onCalendarChange}
          onChange={(val) => setValue(val)}
          onOpenChange={onOpenChange}
        />
    </div>
  )

2.修改后代码

主要是在定义时将类型都改为any，方法中参数 current: Dayjs类型也改为current: any。
对于开始时间与结束时间，我们自己定义 state放入，这样就解决了所有错误。

const { RangePicker } = DatePicker;
const [dates, setDates] = useState<any>(null);
const [value, setValue] = useState<any>(null);
const [startdate, setstartdate] = useState<any>();
const [enddate, setenddate] = useState<any>();

//设置可选范围最大为15天
  const disabledDate = (current:any ) => {
    if (!dates) {
      return false;
    }
    const tooLate = dates[0] &amp;&amp; current.diff(dates[0], 'days') > 15;
    const tooEarly = dates[1] &amp;&amp; dates[1].diff(current, 'days') > 15;
    return !!tooEarly || !!tooLate;
  };
  //每次选择清空上一次记录
  const onOpenChange = (open: boolean) => {
    if (open) {
      setDates([null, null]);
    } else {
      setDates(null);
    }
  };
  //获取日期范围字符串
  const onCalendarChange = (val: any) => {
    setDates(val);
    try {
      let start = moment(val[0].valueOf()).format('YYYY-MM-DD');
      console.log(start);
      setstartdate(start);
      if (val[1] !== null || val[1] !== undefined) {
        let end = moment(val[1].valueOf()).format('YYYY-MM-DD');
        console.log(end);
        setenddate(end);
      }
    } catch (e) {
      message.error('请按顺序输入起始日期！');
    }
  };

//日期选择组件
  const operations = (
    <div>
        <RangePicker
          locale={locale}
          allowClear={false}
          //defaultValue={[dayjs('2022-09-03', dateFormat), dayjs('2022-09-18', dateFormat)]}
          defaultValue={[startdate, enddate]}
          value={dates || value}
          disabledDate={disabledDate}
          onCalendarChange={onCalendarChange}
          onChange={onChange}
          onOpenChange={onOpenChange}
        />
    </div>
  );