使用react-native-community/datetimepicker二次打开报malformed calls from JS错误

核心报错原因 #

你遇到的malformed calls from JS错误本质是传给DateTimePicker的value属性是无效的Date对象，原生层接收JS层传的非法日期参数时就会抛出这个异常。你的代码里的问题集中在两点：

1. 你把选中的日期处理成了格式化字符串存储，第二次打开选择器时用new Date(changedDate)解析这个字符串，不同系统、不同区域设置下的toLocaleDateString输出格式不统一，解析大概率会生成Invalid Date
2. onChange函数中调用了未定义的setDate方法，多余的无效调用也可能引发运行时异常

修复方案 #

第一步：调整state存储类型 #

不要存格式化后的字符串，直接存Date类型的原始值，只在需要展示的时候再做格式化：

import Moment from 'moment';
import { Platform, View, Text, TouchableOpacity } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

// 把固定的初始日期提到组件外避免每次重渲染生成新值
const initialDate = Moment().toDate();

const YourComponent = () => {
  const [show, setShow] = useState(false);
  // 直接存Date类型
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);

  const onChange = (event: any, date?: Date) => {
    setShow(Platform.OS === 'ios');
    // 只有用户确认选择了日期才更新
    if (date) {
      setSelectedDate(date);
    }
  };

  return (
    <View>
      {/* 展示的时候再做格式化 */}
      <Text>{selectedDate ? Moment(selectedDate).format('YYYY-MM-DD') : ''}</Text>
      <TouchableOpacity onPress={() => setShow(true)}>
        <Text>open</Text>
      </TouchableOpacity>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={selectedDate || initialDate}
          mode="date"
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

第二步：校验日期合法性（可选） #

如果你坚持要存格式化字符串，在传给DateTimePicker之前必须先校验日期是否有效：

const getValidDate = (dateStr: string | null, fallback: Date) => {
  if (!dateStr) return fallback;
  const date = new Date(dateStr);
  return isNaN(date.getTime()) ? fallback : date;
}

// 组件内调用
value={getValidDate(changedDate, currentDate.toDate())}

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