Установить состояние, используя getInitialProps Nextjs для базы данных Firebase

Question

Пытаюсь создать приложение Nextjs.Я использую GetInitialProps, чтобы сделать SSR через функции Firebase.В getInitialProps я пытаюсь сделать database.ref (). Child и передать значение в пользовательский интерфейс.

Как установить измененное значение в переменной состояния, чтобы при каждом изменении значения в БД оно отображалось в пользовательском интерфейсе.

В настоящее время возвращаю значение вgetInitialProps, и он не отражает изменение значения БД.Измененное значение печатается на сервере, хотя, когда я устанавливаю консольный регистратор.

КОД:

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).

Вот изменения, которые вы должны сделать:

1. Заменить .on('value', ..) на .once('value', ..) в getInitialProps.
2. Добавить .on('value', ..) в componentDidMount, чтобы ваш компонент оставался обновленным
3. Добавьте off() в componentWillUnmount, чтобы остановить прослушивание при размонтировании компонента.

Редактировать:

getInitialProps инициализирует props, тогда как в componentDidMount будет установлен state.Эту проблему можно решить, добавив конструктор, который будет инициализировать состояние из реквизита, а затем вы сможете только прочитать state из рендера.

Это , обычно считается плохой практикой ,потому что теперь существует более одного источника правды, и неясно, что делать, когда меняются и состояние, и реквизиты, но в этом конкретном случае я думаю, что это нормально, потому что getInitialProps будет запускаться только один раз, и если изменение страницы приведет к изменению компонентабыть отключенным.

Альтернативой является полное пропускание getInitialProps, особенно если единственная причина сохранить его - сократить время первого значимого отображения, поскольку это, вероятно, незаметно для конечного пользователя.Обычно не стоит проводить микрооптимизацию, которая усложняет код.