使用Expo React Native的DateTimePicker时出现value属性必填错误

报错信息 #

Invariant Violation: 必须为value属性指定日期或时间（使用Expo React Native的DateTimePicker时）

问题原因 #

你的代码里有三个关键问题触发了这个报错：

1. 属性名误用：@react-native-community/datetimepicker在Expo环境下，绑定当前选中日期的属性是value，而非你代码里写的date。
2. 无效日期传入：用户取消日期选择时，selectedDate会返回null，你直接用new Date(null)生成的是无效Date对象，组件校验不通过。
3. 缺失依赖导入：代码中使用了Firebase的db实例但未导入，后续保存任务的逻辑也会报错。

修复方案 #

• 把DateTimePicker的date属性替换为value，绑定到state中的date字段，避免每次渲染都生成新的Date实例。
• 在onChange回调里先判断selectedDate是否存在，仅当它不为null时再更新state。
• 补充Firebase数据库实例db的导入代码（根据你的项目配置调整路径）。

修复后的完整代码 #

import {
  View,
  Text,
  Button,
  TextInput,
  ScrollView,
  StyleSheet,
} from "react-native";
import DateTimePicker from "@react-native-community/datetimepicker";
import React, { useState } from "react";
import { collection, addDoc } from "firebase/firestore";
// 补充导入Firebase数据库实例，替换为你的实际配置路径
import { db } from '../path-to-your-firebase-config';

export const CreateTaskScreen = () => {
  const [state, setState] = useState({
    title: "",
    description: "",
    date: new Date(),
  });

  const setData = (key, value) => {
    setState({
      ...state,
      [key]: value,
    });
  };

  const handlePress = async () => {
    await addDoc(collection(db, "tasks"), {
      title: state.title,
      description: state.description,
      date: state.date,
    });
  };

  return (
    <View>
      <Text>Crear tarea</Text>
      <TextInput
        placeholder="Title"
        onChangeText={(value) => setData("title", value)}
      />
      <TextInput
        placeholder="Description"
        multiline
        numberOfLines={4}
        onChangeText={(value) => setData("description", value)}
      />
      <DateTimePicker
        style={{ width: 200 }}
        value={state.date} // 替换为value属性并绑定state中的date
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        display="default"
        onChange={(event, selectedDate) => {
          // 仅当选中有效日期时更新state
          if (selectedDate) {
            setData("date", selectedDate);
          }
        }}
      />
      <Button title="Save" onPress={handlePress} />
    </View>
  );
};

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