React Native DateTimePicker报错：value属性需为Date对象实例

你遇到的问题根源是RNDateTimePicker的onChange回调参数不是直接的Date对象，而是一个包含type和value的事件对象。你当前的代码直接把这个事件对象赋值给了state，导致后续渲染时value prop不再是Date实例，触发错误并崩溃。

修复步骤 #

修改日期和时间选择的回调函数，正确提取选中的Date值，同时处理用户取消选择的场景：

// 替换原来的OnDateSelected和onTimeSelected函数
function OnDateSelected(event, selectedDate) {
  setDatePicker(false);
  // 仅在用户确认选择时更新日期
  if (event.type === 'dateSet') {
    setDatei(selectedDate);
  }
}

function onTimeSelected(event, selectedTime) {
  setTimePicker(false);
  // 仅在用户确认选择时更新时间
  if (event.type === 'timeSet') {
    setTime(selectedTime);
  }
}

完整修复后的代码 #

import RNDateTimePicker from '@react-native-community/datetimepicker';
import React,{ useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function App() {

  const [datePicker,setDatePicker] = useState(false)
  const [datei, setDatei] = useState(new Date())
  const [timePicker,setTimePicker] = useState(false)
  const [time,setTime] = useState(new Date(Date.now()))

  function showDatePicker(){
    setDatePicker(true)
  }
  function showTimePicker(){
    setTimePicker(true)
  }

  function OnDateSelected(event, selectedDate) {
    setDatePicker(false);
    if (event.type === 'dateSet') {
      setDatei(selectedDate);
    }
  }

  function onTimeSelected(event, selectedTime) {
    setTimePicker(false);
    if (event.type === 'timeSet') {
      setTime(selectedTime);
    }
  }
    
  return (
    <View style={styles.container}>
 {datePicker && (
      <RNDateTimePicker
        value={datei}
        mode={'date'}
        // display={Platform.OS === 'ios' ? 'spinner' : 'default'}
        is24Hour={true}
        onChange={OnDateSelected}
        style={styles.datePicker}
      />
    )}

    {timePicker && (
      <RNDateTimePicker
        value={time}
        mode={'time'}
        // display={Platform.OS === 'ios' ? 'spinner' : 'default'}
        is24Hour={false}
        onChange={onTimeSelected}
        style={styles.datePicker}
      />
    )}

    {!datePicker && (
      <View>
        <TouchableOpacity
        onPress={showDatePicker}
        style={[styles.button, styles.buttonOutline]}
      >
        <Text style={styles.buttonOutlineText}>D A T E</Text>
        </TouchableOpacity>
      </View>
    )}
    {!timePicker && (
      <View>
        <TouchableOpacity
        onPress={showTimePicker}
        style={[styles.button, styles.buttonOutline]}
      >
        <Text style={styles.buttonOutlineText}>T I M E</Text>
        </TouchableOpacity>
      </View>
    )}
</View>
)
}

关键说明 #

• onChange回调的第一个参数是事件对象，第二个参数才是选中的Date实例
• 增加event.type判断，避免用户取消选择时将undefined赋值给state，确保datei和time始终是Date实例
• 顺便修正了你代码里的注释错误：Platform.0S改为Platform.OS

内容的提问来源于stack exchange，提问作者The.Kingslayer