ComponentDidMount 在初始挂载后返回 undefined

Question

我的组件在从 firebase 读取一次后正确安装，但在第二次尝试时失败，并说它无法获取值，因为“snap”未定义。我是新手，但我认为缺少绑定？

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() {
    this.interval = setInterval(
      database.on("value", snap => {
        this.setState({
          voltage: snap.val()
        });
        console.log(snap.val());
      }),
      5000
    );
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

Answer 1

您的setInterval 函数正在调用您为"value" 事件传递的事件处理程序。

发生这种情况是因为您传递给 on 的 Database#on 方法 returns the callback（以便稍后在清理阶段取消注册该事件）。

因此，当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 = '';
    }
  }
}