ComponentDidMount возвращает неопределенное значение после первоначального монтирования
как об использовании агрегатной структуры:
db.collection.aggregate({ $group : { _id: null, max: { $max : "$age" }}});
1 ответ
Ваша функция setInterval вызывает обработчик события, который вы передаете для события "value".
Это происходит потому, что метод Database#on возвращает обратный вызов , который вы передаете on (чтобы отменить регистрацию события позже во время фазы очистки).
Таким образом, когда setInterval вызывает ваш обратный вызов, он не сможет передать параметр snap, увидев, что обратный вызов вызван им (а не экземпляром database) - это объясняет, почему snap undefined.
Кроме того - я не уверен, для какой цели setInterval служит здесь. Кажется, вы просто хотите, чтобы компонент обновлялся (повторно отображался) при обнаружении изменения значения в вашей базе данных. В этом случае достаточно звонить setState(), как у вас есть.
Попробуйте пересмотреть код следующим образом:
import React, {
Component
} from "react";
import "./solar.css";
import firebase from "firebase";
import {
config
} from "../config";
let app = firebase.initializeApp(config);
let database = app
.database()
.ref()
.child("values")
.child("Voltage");
class Solar extends Component {
state = {
voltage: 0
};
componentDidMount() {
// Store reference to the "on value" callback for deregistering
// the event when the Solar component unmounts
this.valueChangeCallback = database.on("value", snap => {
this.setState({
voltage: snap.val()
});
console.log(snap.val());
})
}
componentWillUnmount() {
// If a valueChangeCallback exists from former mount then deregister
// this callback from you database instance
if(this.valueChangeCallback) {
database.on("value", this.valueChangeCallback);
this.deregisterCallback = '';
}
}
}