DateTimePicker报错value.getTime is not a function的解决方法

开发用户个人资料编辑功能时，用户资料包含以下字段：

• fullName（姓名）
• gender（性别）
• birthdate（出生日期）

操作时出现固定复现规律的报错：

• 同时修改出生日期和姓名时，资料可正常编辑保存
• 仅修改姓名后执行保存操作，抛出错误：TypeError: value.getTime is not a function. (In 'value.getTime()', 'value.getTime' is undefined)

关联实现代码 #

const [date, setDate] = useState(new  Date());

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

const getUserData = () => {
  axios
    .get(`url/${phone}`)
    .then((response) => {
        setDate(response.data.data[0].birthdate);
    })
    .catch((error) => {
      console.log('error getting data',error);
    });
};

// ... 其余组件逻辑
<View style={{ width: '100%', borderRadius: 8 }}>
     {show && (
        <DateTimePicker
           testID="dateTimePicker"
           value={date}
           mode={mode}
           minimumDate={new Date(1950, 1, 1)}
           maximumDate={moment().subtract(16, 'years').format('YYYY-MM-DDTHH:mm:ss.ssSZ')}
           is24Hour={true}
           display={'default'}
           onChange={onChangeDate}
           style={styles.datePicker}
          />
        )}
 </View>

@react-native-community/datetimepicker组件的value、minimumDate、maximumDate属性，强制要求传入Date类型实例，不支持传入时间字符串。

1. 你在getUserData接口拉取用户信息后，直接把接口返回的birthdate（绝大多数场景下后端返回的是ISO格式时间字符串，不是Date对象）赋值给了date状态。
2. 当你手动修改过出生日期时，onChangeDate回调会拿到组件返回的Date类型实例，覆盖掉之前存的字符串值，所以后续保存时调用getTime()方法不会报错。
3. 如果你只修改姓名、不操作日期选择器，date状态一直存的是字符串类型的时间值，字符串原型上没有getTime方法，就会抛出你看到的类型错误。
4. 额外隐患：你给maximumDate传入的是moment().format()返回的字符串，同样不符合组件的参数类型要求，极端场景下也会触发同类报错。

按以下步骤修改即可解决问题：

1. 接口返回的出生日期赋值前，手动转换为Date实例

const getUserData = () => {
  axios
    .get(`url/${phone}`)
    .then((response) => {
        const birthdateVal = response.data.data[0].birthdate;
        // 空值兜底，有值则转为Date对象再存入状态
        setDate(birthdateVal ? new Date(birthdateVal) : new Date());
    })
    .catch((error) => {
      console.log('error getting data',error);
    });
};

2. 修正maximumDate的传值，直接传入Date对象，不要传格式化后的字符串

// 把原来的format()调用换成toDate()，返回Date实例
maximumDate={moment().subtract(16, 'years').toDate()}

3. （可选兜底）保存逻辑中增加类型校验，避免异常值导致报错

const handleSave = () => {
  // 无论date状态是什么类型，统一转为Date实例再做后续处理
  const submitBirthDate = date instanceof Date ? date : new Date(date);
  // 后续拿submitBirthDate做格式化、参数组装即可，比如submitBirthDate.getTime()
  // ... 其余保存逻辑
}

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