Как сохранить и получить выбранный объект даты из datetimepicker в firebase? - PullRequest
Новая
       4

Как сохранить и получить выбранный объект даты из datetimepicker в firebase?

0 голосов
/ 26 мая 2020

Это код, который отправляет и получает данные от firebase соответственно. 

class Fire {
    addAppointment(currentDate, addComplete) {
            firebase.firestore()
                .collection("appointment")
                .add({
                    date: currentDate.date,
                    createdAt: firebase.firestore.FieldValue.serverTimestamp()
                }).then((snapshot) => snapshot.get())
                .then((dateInfo) => addComplete(dateInfo.data()))
                .catch((error) => alert(error));
        }

        getAppointment = async ({ dateRetreived }) => {
            var dateList = [];

            var snapshot = await firebase.firestore()
                .collection("appointment")
                .orderBy('createdAt')
                .get()

            snapshot.forEach((doc) => {
                const dateCreated = doc.data();
                dateCreated.id = doc.id;
                dateList.push(dateCreated);
            });

            dateRetreived(dateList);
        }
}

Fire.shared = new Fire();
export default Fire;

Это код datetimepicker, который отправляет "currentDate" в приведенный выше код. Обратите внимание, что onChange был изменен на handleChange. 

class Booking extends Component {
    state = {
        isDatePickerVisible: false,
        date: new Date(),

    };

    showDateTimePicker = () => {
        this.setState({
            isDatePickerVisible: true
        })
    }

    hideDateTimePicker = () => {
        this.setState({
            isDatePickerVisible: false
        })
    }

    handleChange = (event, selectedDate) => {
        const currentDate = selectedDate || date;
        this.setState(prevState => ({
            currentDate: prevState.currentDate = currentDate
          }));
      };


    render() {
        return (
            <View>

                <View style={styles.picker}>
                    <Button
                        title="Show Date Picker" onPress={this.showDateTimePicker}
                    />
                    <DateTimePicker
                        cancelTextIOS={'Exit'}
                        confirmTextIOS={'OK'}
                        isVisible={this.state.isDatePickerVisible}
                        mode="date"
                        onConfirm={this.handleChange}
                        onCancel={this.hideDateTimePicker} 
                        is24Hour={false} 
                    />
                </View>

                <View style={styles.btn} >
                    <Button
                        onPress={() =>
                            Fire.shared.addAppointment(this.handleChange)
                        }
                        title="Book"
                    />
                </View>
            </View>

        )
    };
};

export default Booking;

Я получаю сообщение об ошибке:

FirebaseError: функция documentReference.set () вызывается с недопустимыми данными. неподдерживаемое значение поля: undefined (найдено в поле date)

Я внес несколько изменений в код: 

addAppointment(currentDate, addComplete) {
        firebase.firestore()
            .collection("appointment")
            .add({
                date: firebase.firestore.Timestamp.fromDate(new Date(currentDate)),
             ...
    }

И в состоянии: 

   state = {
            isDatePickerVisible: false,
            Date: new Date(1598051730000),

        };

При обработке изменений 

  handleChange = (event, selectedDate) => {
            const currentDate = selectedDate || Date;
            this.setState(prevState => ({
                currentDate: prevState.currentDate = currentDate
              }));
          };

На DateTimePicker 

onConfirm={this.handleChange}

При нажатии кнопки «Книга» 

<Button onPress={() => {Fire.shared.addAppointment(this.handleChange)}}
                        title="Book"
                    />

Я не получаю ReferenceError: date is not defined после выбора даты. Когда я нажимаю BOOK, ошибок не происходит и данные в Cloud Firestore не отображаются.

Ответы [ 2 ]

1 голос
/ 26 мая 2020

Поскольку вы храните свой Date в своем состоянии, нет необходимости передавать его в качестве аргумента. Просто войдите в него напрямую: 

<Button onPress={() => {Fire.shared.addAppointment(this.onChange)}} title="Book" />

addAppointment(addComplete) {
  firebase
    .firestore()
    .collection("appointment")
    .add({
      date: this.state.currentDate.date,
      createdAt: firebase.firestore.FieldValue.serverTimestamp(),
    })
    .then((snapshot) => snapshot.get())
    .then((dateInfo) => addComplete(dateInfo.data()))
    .catch((error) => alert(error));
}
0 голосов
/ 02 июня 2020

Я так много боролся, что перенес метод addAppointment в файл DatePicker. js. Это то, что у меня сработало. 

const Booking = () => {
    const [date, setDate] = useState(new Date());
    const [mode, setMode] = useState('date');
    const [show, setShow] = useState(false);

    const showMode = currentMode => {
        setShow(true);
        setMode(currentMode);
    };

    const showDatepicker = () => {
        showMode('date');
    };

    const showTimepicker = () => {
        showMode('time');
    };

    const onChange = (event, date) => {
        const currentDate = date;
        setShow(Platform.OS === 'ios');
        setDate(currentDate);
        console.warn(currentDate);
    };

    const addAppointment = () => {
        firebase.firestore()
            .collection("appointment")
            .add({
                uid: firebase.auth().currentUser.uid,
                date: firebase.firestore.Timestamp.fromDate(date),
                createdAt: firebase.firestore.FieldValue.serverTimestamp()
            }).then((snapshot) => snapshot.get())
            .catch((error) => alert(error));
    }

    return (
        <View>
            <View>

                <View style={styles.picker}>
                    <Button onPress={showDatepicker} title="Show date picker!" />
                </View>
                <View style={styles.picker}>
                    <Button onPress={showTimepicker} title="Show time picker!" />
                </View>
                {show && (
                    <DateTimePicker
                        testID="dateTimePicker"
                        timeZoneOffsetInMinutes={0}
                        value={date}
                        mode={mode}
                        is24Hour={true}
                        display="default"
                        onChange={onChange}
                    />
                )}
            </View>

            <View style={styles.btn} >
                <Button
                    onPress={() => addAppointment(onChange)}
                    title="Book"
                />
            </View>
        </View >

    );
};

export default Booking;
...