为什么我在 reactjs 中从 firebase 读写时出错？答案

【问题标题】：Why have I errors while reading and writing from firebase in reactjs?为什么我在 reactjs 中从 firebase 读写时出错？
【发布时间】：2020-04-28 05:01:50
【问题描述】：

当我使用以下代码时，我会从 firebase 获取控制台中的事件。

getEvents = () => this.db.ref('events');

this.props.firebase.getEvents().on('value', snapshot => {
            console.log(snapshot.val());
        });

当我添加以下代码行时，以下两个函数都会出现此错误： TypeError: this.db.ref(...).where 不是函数

GetEvents 函数显示日历上的事件。 updateEquipments 函数创建新设备

GetEvents = uid => {
                this.db.ref('events').where('ownerId', '==', uid).get();
            };

UpdateEquipments = id => {
            this.db.collection('equipments').doc(id);
        };

this.props.firebase.GetEvents(this.props.uid).then(querySnapshot => {
                querySnapshot.forEach(doc => {
                    newEvents.push(doc.data());
                    this.setState({
                        events: newEvents,
                    });
                });
            });


 createEquipment = ({ title, desc }) => {
        const { equipments } = this.state;
        const newEquipmentId = uuidV4();
        const updatedEquipment = {
            ...this.state.modal,
            id: newEquipmentId,
            ownerId: this.props.uid,
            title,
            desc,
        };
        const nextEquipments = [...equipments];
        nextEquipments.push(updatedEquipment);
        this.props.firebase
            .UpdateEquipments(newEquipmentId)
            .set(updatedEquipment)
            .then(
                this.setState({
                    equipments: nextEquipments,
                })
            )
            .catch(error => {
                console.error('Create New Equipment error', error);
            });
    };



    render() {
        if (this.state.events) {
            return (
                            <div className={'col-2'}>
                            Equipments:
                            <FloatingActionButton
                                mini={true}
                                className={'m-2'}
                                onClick={() => this.handleEquipments()}
                            >
                                <ContentAdd />
                            </FloatingActionButton>
                            <Sidebar
                                events={this.state.equipments}
                                onClickEvent={this.handleEquipments}
                            />
                        </div>
                        <div style={{ height: 500 }} className={'col-8'}>
                            <DragAndDropCalendar
                                events={this.state.events}                          
                                backend={false}
                            />
                            <Dialog
                                title="Task"
                                modal={false}
                                open={this.state.modalOpen}
                            >
                                <Modal
                                    event={this.state.modal}
                                    onRequestClose={this.handleClose}
                                />
                            </Dialog>
                            <Dialog
                                title="Equipments"
                                modal={false}
                                open={this.state.equipmentsOpen}
                                onRequestClose={this.handleClose}
                            >
                                <Modal
                                    event={this.state.modal}
                                    onRequestClose={this.handleClose}
                                    onCreatEvent={this.createEquipment}
                                />
                            </Dialog>                            
                        </div>
            );
        }
    }

这里是完整代码：https://github.com/Tim1023/react-scheduler-firebase

【问题讨论】：

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

Firebase 包含两个数据库：

原始实时数据库，将数据存储为单个 JSON 树。
较新的 Cloud Firestore，将数据存储在集合和文档中。

这两个数据库都是 Firebase 的一部分，但它们是完全独立的，您不能将 API 用于其中一个。

这正是你在这里所做的：

this.db.ref('events').where('ownerId', '==', uid).get();

this.db.ref('events') 似乎适用于实时数据库，但 .where('ownerId', '==', uid).get() 是仅适用于 Cloud Firestore 的代码。

解决方案是坚持使用API 和documentation 用于您似乎实际使用的实时数据库。

【讨论】：