React + Firebase数据库组件DidMount和快照不起作用

Question

I am trying to get .on('value') to fire so I can retrieve data but something is not working correctly. 'Mounted' logs fine, but 'test' does not. Can somebody please explain what I am probably misunderstanding? Additionally, I would like to update the state as shown in the commented out code.

Thank you for your help!

    import React, { Component } from 'react'
import './Creature.css'
import Emblem from '../../../img/emblem_macabre.png'
import Macabre from '../../../img/macabre.jpg'
import * as firebase from 'firebase';

class Creature extends Component {

  constructor() {
    super()
    this.state = {
      name: '',
      cultId: ''
    }
  }

  componentDidMount() {
    console.log('mounted')
    const creatureCards = firebase.database().ref().child('creatureCards')
    console.log(creatureCards)
    creatureCards.on('value', snap => {
      console.log('test')
    })

      // var name = snap.child('name').getValue()
      // var cultId = snap.child('cultId').getValue()

      // this.setState({
      //   name: name,
      //   cultId: cultId
      // })
    }

  render() {
    return(
      <div className="creatureCard">
        <span className="creatureName">{this.state.name}</span>
        <span className="creatureArt"><img src={Macabre} alt=""/></span>
        <ul className="creatureAttributes">
          <li className="creatureAttribute">R</li>
          <li className="creatureAttribute">D</li>
          <li className="creatureAttribute">I</li>
          <li className="creatureAttribute">H</li>
        </ul>
        <span className="creatureDescription">
          <p>Card descriptions and abilities. This section defines the card and its roll in the game.</p>
        </span>
        <div className="emblem">
          <img src={Emblem} alt=""/>
        </div>
      </div>
    )
  }
}

export default Creature

Answer 1

问题在于，有时我切换到了Firestore，但仍在对数据库进行调用。