Question

我在SSR方面还很陌生。但是我在为我的应用程序实现某些功能时遇到问题。我在我的应用程序中使用上下文API。并制作一些自己的 ContextApi ，它已连接到 Firebase数据库。基本上，我只想将我的所有应用包装在Provider组件中，以通过子组件共享一些道具。
我知道我必须使用wrapRootElement （在gatsby-browser.js和gatsby-ssr.js文件中）来包装所有组件。

export {default as wrapRootElement} from './src/firebase/context';

我仅托管我的 DatabaseProvider 组件的位置。并使用gatsby-plugin-firebase将我的应用程序和所有配置都连接到 Firebase （需要将其插入gatsby.config.js中）。
我只想使用gatsby-plugin-firebase中的 useFirebase 钩子来接收 Firebase DB 的所有数据，并将此日期保存为状态，在< strong> DatabaseProvider 。

这是我的问题。

如果我使用 useFirebase 挂钩获取数据，则在Provider组件中，该组件是 wrapRootElement 的包装器。我什么也没有， useFirebase 挂钩什么也没做。

function DatabaseProvider({ children }) {
    console.log('INITIALIZED::DatabaseProvider') 
    const [goods, setGoods] = React.useState(null)
    useFirebase(firebase => {
        console.log('CALLBACK::START');
        firebase
            .database()
            .ref("/projects")
            .once("value")
            .then(snapshot => {
                const _goods = snapshot.val();
                console.log("SUCCESS::GOODS", _goods)
                setGoods(_goods)
            }).catch(e => console.log("ERROR", {e}))
    }, [])

    return (
        <Database.Provider value={{goods}}>{children}</Database.Provider>
    )
}

// export for gatsby-browser.js and gatsby-ssr.js
export default ({ element }) => {
    return (
        <DatabaseProvider>{element}</DatabaseProvider>
    )
}

我在控制台中看到 INITIALIZED :: DatabaseProvider 。但仍然没有收到 CALLBACK :: START 和 SUCCESS :: GOODS 或 ERROR 消息。

如果我只是复制并粘贴此代码

useFirebase(firebase => {
        console.log('callback::start');
        firebase
            .database()
            .ref("/projects")
            .once("value")
            .then(snapshot => {
                const _goods = snapshot.val();
                console.log("Success::Goods", _goods)
            }).catch(e => console.log("Error", {e}))
    }, [])

并直接在 src / pages / index.js 内部使用，我从控制台获得了所有消息（Error：D除外），当然还有所有商品清单。
所以我的问题是-
我该如何处理这种奇怪的行为，以便将所有商品都存储在 DatabaseProvider 中。我在盖茨比文档中想念的是什么？

非常感谢您的宝贵时间！

wrapRootElement意外行为。盖茨比

0 个答案: