Question

我的组件从firebase读取一次后正确安装，但是第二次尝试失败，并说它无法获取值，因为“快照”未定义。我是新来的反应者，但我认为某些东西缺少约束力？

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"事件传递您要传递的事件处理程序。

之所以会这样，是因为您传递给Database#on的{{1}}方法returns the callback（以便在清除阶段稍后注销事件）。

因此，当on调用您的回调函数时，它将无法传递setInterval参数，因为看到回调函数被调用了（而不是snap实例）-解释了为什么database是snap的原因。

也-我不确定undefined在这里有什么作用。似乎您只希望组件在数据库中检测到值更改时进行更新（重新渲染）。在这种情况下，只需调用setInterval就可以了。

考虑如下修改代码：

setState()

初始安装后ComponentDidMount返回未定义

1 个答案: