setState（）导致道具未定义

Question

I'm brand new to React and am tinkering with some Firebase stuff. I'm trying to load in some data from Firebase, filter through some of it, and then set my current state to that data. For some reason on the code below, calling setState causes the following error:

Uncaught TypeError: Cannot read property 'database' of undefined

import React, {Component} from 'react';

import Activity from './ActivityList'

class ActivityList extends Component {
    constructor(props){
      super(props);

      this.state = {
        activities: []
      }

      let app = this.props.db.database().ref('activities');

      app.on('value', function(snapshot) {

        this.handleData(snapshot.val())

      }.bind(this))
    }

    handleData(values) {

        let category = this.props.category

        let filtered = values.filter(function(item) {
          return item.categories.includes(category)
        })

        console.log(filtered)

        this.setState({activities: filtered})

    }

    render() {
        let activityNodes = this.state.activities.map((activity) => {
          return (
            <Activity activity= {activity} />
            )
      });
        return (
          <div>
            <ul>
             {activityNodes}
            </ul>
          </div>
        );
    }
}

In my code, I am passing in firebase in props.db . I've also (hopefully) isolated the problem to setState , because my console.log(filtered) call works as intended, meaning on the first "pass", prop/props.db was definitely defined. I'm guessing that this has something to do with the non-blocking nature of setState , but I can't for the life of me figure out why this would cause the value of prop to be undefined .

Edit: Initialization code for db as requested:

import * as firebase from 'firebase'

class App extends Component {

  constructor(props) {
    super(props);
    var config = {
      apiKey:,
      authDomain:,
      databaseURL:,
      projectId:,
      storageBucket:,
      messagingSenderId: 
    };
    firebase.initializeApp(config);

  }

This is then passed into a Category component:

<CategoryList db={firebase}/>

Which then passes it into the above ActivityList component:

<ActivityList db={this.props.db}/>

Again, even in the ActivityList component, it seems like it is reading from the database successfully until I call setState .

Answer 1

Edited:

In chat we found that he was importing something wrong. That was missing in his question's post.

import Activity from './ActivityList'

Now his map function created ActivityList Components instead of Actitvity Components.

But it should be:

import Activity from './Activity'