编辑：

Question

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

如何在状态变量中设置更改后的值，以使DB中的值每次更改时，都会在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', ..)中用.once('value', ..)替换getInitialProps。
在.on('value', ..)中添加一个componentDidMount，以使组件保持更新状态
在off()中添加一个componentWillUnmount，以在组件卸载时停止监听。

编辑：

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

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

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

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

1 个答案:

编辑：