使用react-native-paper-dates多选日期后重弹弹窗报undefined is not function

问题场景 #

使用react-native-paper-dates库的DatePickerModal组件并启用多选模式（mode="multiple"）时，选择多个日期关闭弹窗后，再次打开弹窗会抛出"undefined is not function"错误。

问题代码 #

import { useState } from 'react';
import { DatePickerModal } from 'react-native-paper-dates';

// ...

const [showDate, setShowDate] = useState(false);
const [dates, setDates] = useState<any>([]);

// ...

<DatePickerModal
  locale="en"
  mode="multiple"
  visible={showDate}
  onDismiss={() => setShowDate(false)}
  dates={dates}
  onConfirm={dates => {
    console.log(dates);
    setShowDate(false);
    setDates(dates);
  }}
/>

修复方案 #

通过useCallback缓存onDismiss和onConfirm回调函数，保持回调引用的稳定性，同时注意多选模式下onConfirm的参数是包含选中日期数组的对象，需通过params.dates获取选中日期：

import { useState, useCallback } from 'react';
import { DatePickerModal } from 'react-native-paper-dates';

// ...

const [showDate, setShowDate] = useState(false);
const [dates, setDates] = useState<any>([]);

const onDismiss = useCallback(() => {
  setShowDate(false);
}, [setShowDate]);

const onConfirm = useCallback((params: any) => {
  setShowDate(false);
  setDates(params.dates);
}, []);

// ...

<DatePickerModal
  locale="en"
  mode="multiple"
  visible={showDate}
  onDismiss={onDismiss}
  dates={dates}
  onConfirm={onConfirm}
/>

说明 #

未缓存的回调函数会在组件每次渲染时创建新实例，导致DatePickerModal内部监控的回调引用频繁变化，触发内部逻辑错误；使用useCallback可固定回调引用，避免此类问题。同时多选模式下onConfirm的参数结构与单选模式不同，需正确提取选中的日期数组。

内容的提问来源于stack exchange，提问作者Timothy Pham