时间戳

首页 > 解决方案 > 如何在 Mozilla 控制台上查看我的快照？

reactjs - 如何在 Mozilla 控制台上查看我的快照？

问题描述

所以我是 React 的新手，并通过基于项目的课程学习它。我被困住了，希望你们好人会有所帮助。

因此，我将本地数据添加到 firestore，以便稍后将其取回我的应用程序并将其添加到我的 reducer，以便更轻松地从不同设备访问数据。我遇到的问题是显示我的文档快照。现在从教程中，他显示了他的文档快照，但从我的角度来看，我从日志中什么也得不到。

将我的数据添加到 firestore（在我创建的 firestore 文件中）的代码是：

export const addCollectionAndDocuments = async (
    collectionKey,
    objectsToAdd
) => {
    const collectionRef = firestore.collection(collectionKey);
    
    const batch = firestore.batch();
    objectsToAdd.forEach((obj) => {
        const newDocRef = collectionRef.doc();
        batch.set(newDocRef, obj);
    });

    return await batch.commit();
};

显示我的快照的代码（在我导入我的 firestore 文件的不同文件中）是：

class ShopPage extends React.Component {
    unsubscribeFromSnapshot = null;

    componentDidMount() {
        const collectionRef = firestore.collection('collections');
        collectionRef.onSnapshot(async (snapshot) => {
            console.log(snapshot);
        });
    }

    render() {
        const { match } = this.props;
        return (
            <div className="shop-page">
                <Route exact path={`${match.path}`} component={CollectionOverview} />
                <Route path={`${match.path}/:collectionId`} component={CollectionPage} />
            </div>
        );
    }

预期输出：我从 firestore 获得的查询快照，即（一个包含 5 个查询文档快照的数组）。【预期输出截图】：https ://i.stack.imgur.com/UdDNM.jpg

当前输出：我的快照没有日志。

请帮助！

标签： reactjsgoogle-cloud-firestore

解决方案

我将浏览器从 Mozilla Firefox 更改为 Chrome，一切正常。我在 chrome 控制台中记录了我的快照查询。

推荐阅读