setState（）は小道具を定義しないようにします

Question

私はReactに新しく、いくつかのFirebaseのもので微妙に変化しています。 Firebaseからデータを読み込み、その中のいくつかをフィルタリングして、そのデータに現在の状態を設定しようとしています。以下のコードにいくつかの理由で、setStateを呼び出すと、次のエラーが発生します。私のコードでは

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> 
     ); 
    } 
} 

、私はprops.dbにfirebaseに渡しています。私のconsole.log(filtered)呼び出しが意図した通りに機能するので、最初の "合格"を意味するprop/props.dbが明確に定義されているため、問題をsetStateにも（望めば）分けました。私はこれがノンブロッキングな性質のsetStateと関係があると推測していますが、なぜ私の人生のためにこれがpropの値をundefinedにするのか理解できません。

編集：要求されたようdbの初期化コード：これは、次いで、Categoryコンポーネントに渡され

import * as firebase from 'firebase' 

class App extends Component { 

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

    } 

：次いで、上記ActivityListコンポーネントに渡し

<CategoryList db={firebase}/>

：

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

ActivityListコンポーネントでも、setStateを呼び出すまで、データベースから正常に読み取っているようです。

Answer 1

編集：

チャットでは、間違ったものをインポートしていました。それは彼の質問の投稿にはなかった。

import Activity from './ActivityList' 

ここで彼のマップ関数は、Actitvity ComponentsではなくActivityList Componentsを作成しました。

しかし、それは次のようになります。

import Activity from './Activity'