使用 Nextjs 的 getInitialProps 为 firebase DB 设置状态

Question

我正在尝试构建 Nextjs 应用程序。我正在使用 GetInitialProps 通过 Firebase 函数执行 SSR。在 getInitialProps 中，我尝试做一个 database.ref().child 并将值传递给 UI 。

我如何在状态变量中设置更改后的值，以便数据库中的值发生更改时，它会反映在 UI 中。

目前正在返回 getInitialProps 中的值，它不会反映 DB 值何时发生变化。虽然当我放置控制台记录器时，更改的值会打印在服务器上。

代码：

static async getInitialProps({ req,query }) {

    var customer;

    database.ref().child('someKey').child)
    .on('value', function(snapshot) {
        console.log(snapshot.val());
        customer = snapshot.val();
        console.log(customer.name);
        this.setState({waitNum : customer.waitNum});
        return {customer};
    });

    console.log("Hi Here");
    return {customer};
}

Answer 1

getInitialProps 仅在服务器端（当您首次加载网站页面时）或客户端（当您导航时）执行一次使用 Link).

到另一个页面

以下是您应该做的更改：

将 .on('value', ..) 替换为 getInitialProps 中的 .once('value', ..)。
在 componentDidMount 中添加一个 .on('value', ..)，以便您的组件保持更新
在componentWillUnmount中添加一个off()以在组件卸载时停止监听。

编辑：

getInitialProps 初始化 props，而在 componentDidMount 中将设置 state。这可以通过添加一个构造函数来解决，该构造函数将从 props 初始化状态，然后您只能从渲染中读取 state。

这是通常被认为是不好的做法，因为现在有不止一个真实来源，并且不清楚当状态和道具都发生变化时该怎么做，但在那个特定的我认为这很好，因为 getInitialProps 只会运行一次，如果页面更改，组件将被卸载。

另一种方法是完全跳过 getInitialProps，尤其是如果保留它的唯一原因是减少首次有意义显示的时间，因为它可能不会被最终用户注意到。通常不值得进行会增加代码复杂性的微优化。

使用 Nextjs 的 getInitialProps 为 firebase DB 设置状态

Set State Using getInitialProps of Nextjs for firebase DB

reactjs

next.js

server-side-rendering

编辑：