React Native DateTimePicker在iOS打开日期选择弹窗时抛出date:'<<NaN>>'错误求助

错误信息 #

错误信息：Invariant Violation:
[5413,"RNDateTimePicker",21,{"testID":"dateTimePicker","height":34.5,"width":142.66666666666666,"alignSelf":"flex-start","date":"<>","mode":"date","onChange":true,"displayIOS":"default","enabled":true}]
无法作为原生方法参数使用

问题代码 #

const [date, setDate] = useState(new Date());
const [mode, setMode] = useState('date'); //用于在时间和日期模式间切换

const onChangeDate = (event, selectedDate) => {
  // console.log('date inside onChnage: ', date);
  // console.log('Select Date: ', selectedDate);
  const currentDate = selectedDate || date;
  setShow(Platform.OS === 'ios');
  setDate(currentDate);
  // console.log('currentDate: ', date);
  let tempDate = currentDate;
  let sDate = tempDate.getDate() + '/' + (tempDate.getMonth() + 1) + '/' + tempDate.getFullYear();
  setIsValidDate(true);
  setDateText(sDate);
};

报错原因 #

错误核心是传递给RNDateTimePicker的date参数为无效值（<<NaN>>），原生组件无法识别。大概率是以下情况导致：

• 某个操作意外将date状态从Date类型改成了非Date值（比如字符串、null）
• selectedDate在iOS端某些场景下返回null，而此时date状态已变为无效值，导致currentDate无效

解决方案 #

1. 严格维护date状态的类型
   确保所有调用setDate的地方，传入的都是有效的Date对象，绝对不要传入字符串或其他类型。检查代码中是否有其他地方错误执行了setDate(dateText)这类操作。

2. 添加参数容错处理
   在渲染RNDateTimePicker时，对date参数做校验，若无效则替换为默认日期：

   <RNDateTimePicker
     // 其他属性
     date={date instanceof Date && !isNaN(date) ? date : new Date()}
   />
   

3. 优化onChange逻辑
   处理selectedDate为null的场景，确保currentDate始终有效：

   const onChangeDate = (event, selectedDate) => {
     const currentDate = selectedDate ?? new Date(); // 若selectedDate为null，用当前日期代替
     setShow(Platform.OS === 'ios');
     setDate(currentDate);
     let sDate = `${currentDate.getDate()}/${currentDate.getMonth() + 1}/${currentDate.getFullYear()}`;
     setIsValidDate(true);
     setDateText(sDate);
   };
   

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