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

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

如何在状态变量中设置已更改的值，以便在DB中的值发生更改时，它会反映在UI中。

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};
}

目前，我正在返回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};
}

---

getInitialProps

只执行一次，无论是服务器端（首次加载网站页面时）还是客户端（使用

链接导航到另一页面时）

以下是您应该做的更改：

在
getInitialProps
中，将（'value'，…）

上的

.on替换为一次（'value'，…）

在

componentDidMount

中添加一个

.on（'value'，…）

，以便组件保持更新状态

在

componentWillUnmount

中添加

off（）

，以在卸载组件时停止侦听

编辑：

getInitialProps

初始化

props

，而在

componentDidMount

中，将设置

状态。这可以通过添加一个构造函数来解决，该构造函数将从道具中初始化状态，然后您只能从渲染中读取
状态

这是通常被认为是不好的做法，因为现在有不止一个真相来源，而且不清楚当状态和道具都改变时该怎么办，但在这种特殊情况下，我认为这是好的，因为
getInitialProps
只运行一次，如果页面改变，组件将被卸载

另一种方法是完全跳过
getInitialProps
，特别是如果保留它的唯一原因是为了减少首次有意义显示的时间，因为最终用户可能不会注意到它。通常不值得进行增加代码复杂性的微优化。
只执行一次
getInitialProps
，无论是服务器端（首次加载网站页面时）还是客户端（使用
链接导航到另一页面时）

以下是您应该做的更改：

在
getInitialProps
中，将（'value'，…）
上的
.on替换为一次（'value'，…）
在
componentDidMount
中添加一个
.on（'value'，…）
，以便组件保持更新状态
在
componentWillUnmount
中添加
off（）
，以在卸载组件时停止侦听
编辑：
getInitialProps
初始化
props
，而在
componentDidMount
中，将设置
状态。这可以通过添加一个构造函数来解决，该构造函数将从道具中初始化状态，然后您只能从渲染中读取
状态

这是通常被认为是不好的做法，因为现在有不止一个真相来源，而且不清楚当状态和道具都改变时该怎么办，但在这种特殊情况下，我认为这是好的，因为
getInitialProps
只运行一次，如果页面改变，组件将被卸载

另一种方法是完全跳过
getInitialProps
，特别是如果保留它的唯一原因是为了减少首次有意义显示的时间，因为最终用户可能不会注意到它。通常不值得对代码进行增加复杂性的微优化。
once-in-getInitialProps现在返回undefined。它可以很好地与。此外，是否有一种方法可以合并道具和设置状态。getInitialProps在使用componentDidMount I setState时设置道具。当我显示时，是否需要同时显示状态和道具？我建议使用
.once
，因为
.on
正在创建订阅，这是一种浪费，但是您甚至可以完全跳过
getInitialProps
，只使用
componentDidMount
。它可以很好地与。此外，是否有一种方法可以合并道具和设置状态。getInitialProps在使用componentDidMount I setState时设置道具。当我显示时，我需要同时显示状态和道具吗？我建议使用
。一次
，因为
.on
正在创建订阅，这只会浪费一次使用时间，但您甚至可能完全跳过
getInitialProps
，而只使用
componentDidMount
。