[英][Unhandled promise rejection: FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom Class object
I want to post data in firebase firestore database but I don't understand why that does'nt work I Can post prewrite title in database but not with custom title from an input我想在 firebase firestore 数据库中发布数据,但我不明白为什么这不起作用我可以在数据库中发布预写标题,但不能使用来自输入的自定义标题
traceback: [Unhandled promise rejection: FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom Class object (found in field date in document events/T58NdobxrvVchtaQjYx0)]
追溯: [Unhandled promise rejection: FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom Class object (found in field date in document events/T58NdobxrvVchtaQjYx0)]
[Unhandled promise rejection: FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom Class object (found in field date in document events/T58NdobxrvVchtaQjYx0)]
My addEvent function to add eventDate and a title to an firebase events collection我的 addEvent function 将事件日期和标题添加到 firebase 事件集合
firebase.js firebase.js
export async function addEvent(date, title) {
const eventsRef = collection(db, EVENTS_COLLECTION);
const newEventRef = await addDoc(eventsRef, {
date,
title,
})
.then(() => {
// Data saved successfully!
console.log("data submitted");
})
.catch((error) => {
// The write failed...
console.log(error);
});
const newEvent = await getDoc(newEventRef);
return newEvent;
}
My calendar to add data on firebase.我的日历要在 firebase 上添加数据。
I have a button that open picker date time modal and next modal with an input to add data with submit and cancel button.我有一个按钮可以打开选择器日期时间模态和下一个模态,并带有输入以使用提交和取消按钮添加数据。
CalendarScreen.js CalendarScreen.js
import React, { useState } from "react";
import { View, Button, StyleSheet, Modal, TextInput } from "react-native";
import { addEvent } from "../../firebase/firebase";
import CalendarPicker from "react-native-calendar-picker";
import DateTimePickerModal from "react-native-modal-datetime-picker";
export default function CalendarScreen({ selectedDate, onDateChange }) {
const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
const [isTitleModalVisible, setIsTitleModalVisible] = useState(false);
const [eventTitle, setEventTitle] = useState("");
const showDatePicker = () => {
setIsDatePickerVisible(true);
};
const hideDatePicker = () => {
setIsDatePickerVisible(false);
};
const showTitleModal = () => {
setIsTitleModalVisible(true);
};
const hideTitleModal = () => {
setIsTitleModalVisible(false);
};
const handleAddEvent = (eventDate, eventTitle) => {
hideDatePicker(eventDate, eventTitle);
showTitleModal();
};
const handleSubmitTitle = (eventDate, eventTitle) => {
addEvent(eventDate, eventTitle);
hideTitleModal();
setEventTitle("");
};
return (
<View>
<CalendarPicker
style={styles.calendar}
selectedDate={selectedDate}
onDateChange={onDateChange}
/>
<Button title="Add Event" onPress={showDatePicker} />
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="datetime"
onConfirm={handleAddEvent}
onCancel={hideDatePicker}
/>
<Modal style={styles.modal} visible={isTitleModalVisible}>
<View>
<TextInput
placeholder="Event Title"
value={eventTitle}
onChangeText={setEventTitle}
style={styles.input}
/>
<Button title="Submit" onPress={handleSubmitTitle} />
<Button title="Cancel" onPress={hideTitleModal} />
</View>
</Modal>
</View>
);
}
EDIT When string is typed编辑输入字符串时
export async function getEvents() {
const eventsRef = collection(db, EVENTS_COLLECTION);
const docSnap = await getDocs(eventsRef);
const events = [];
docSnap.forEach((doc) => {
events.push({ id: doc.id, ...doc.data() });
});
return events;
}
CalendarScreen.js CalendarScreen.js
export default function CalendarScreen({ selectedDate, onDateChange }) {
const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
const showDatePicker = () => {
setIsDatePickerVisible(true);
};
const hideDatePicker = () => {
setIsDatePickerVisible(false);
};
const handleAddEvent = (eventDate) => {
addEvent(eventDate);
hideDatePicker();
};
return (
<View>
<CalendarPicker selectedDate={selectedDate} onDateChange={onDateChange} />
<Button title="Add Event" onPress={showDatePicker} />
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="datetime"
onConfirm={handleAddEvent}
onCancel={hideDatePicker}
/>
</View>
);
temporary SOLUTION: See you database even with the error临时解决方案:看到你的数据库,即使有错误
CalendarScreen.js CalendarScreen.js
import React, { useState } from "react";
import { View, Button, StyleSheet, Modal, TextInput } from "react-native";
import { addEvent } from "../../firebase/firebase";
import CalendarPicker from "react-native-calendar-picker";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import moment from "moment-timezone";
moment.tz.setDefault("Europe/Paris");
export default function CalendarScreen({ selectedDate, onDateChange }) {
const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
const [isModalVisible, setIsModalVisible] = useState(false);
const [eventTitle, setEventTitle] = useState("");
const showDatePicker = () => {
setIsDatePickerVisible(true);
};
const hideDatePicker = () => {
setIsDatePickerVisible(false);
};
const showModal = () => {
setIsModalVisible(true);
};
const hideModal = () => {
setIsModalVisible(false);
};
const handleAddEvent = (eventDate) => {
addEvent(eventDate, eventTitle);
showModal();
};
const handleSubmit = (eventDate) => {
addEvent(eventDate, eventTitle);
hideModal();
hideDatePicker();
};
return (
<View>
<CalendarPicker selectedDate={selectedDate} onDateChange={onDateChange} />
<Button title="Add Event" onPress={showDatePicker} />
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="datetime"
onConfirm={handleAddEvent}
onCancel={hideDatePicker}
/>
<Modal animationType="slide" transparent={false} visible={isModalVisible}>
<View>
<TextInput
placeholder="Event Title"
value={eventTitle}
onChangeText={setEventTitle}
/>
<Button
title="Submit"
onPress={(eventDate) => handleSubmit(eventDate)}
/>
<Button title="Cancel" onPress={hideModal} />
</View>
</Modal>
</View>
);
CRUD增删改查
export async function addEvent(date, title) {
const eventsRef = collection(db, EVENTS_COLLECTION);
const newEventRef = await addDoc(eventsRef, {
date: date,
title: title,
})
.then(() => {
// Data saved successfully!
console.log("data submitted");
})
.catch((error) => {
// The write failed...
console.log(error);
});
const newEvent = await getDoc(newEventRef);
return newEvent;
}
The error indicates that you try to write a document with an unsupported field value for the field date
.该错误表明您尝试使用字段date
的字段值不受支持来编写文档。
You will find here the list of the data types supported by Firestore.您将在此处找到 Firestore 支持的数据类型列表。 You need to transform the Object returned by your date picker to an Object that has a type supported by Firestore.您需要将日期选择器返回的 Object 转换为具有 Firestore 支持的类型的 Object。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.