setState（）導致道具未定義

Question

我是React的新手，正在修補一些Firebase的東西。 我正在嘗試從Firebase加載一些數據，對其中的一些進行過濾，然后將當前狀態設置為該數據。 由於以下代碼的某些原因，調用setState會導致以下錯誤：

未捕獲的TypeError：無法讀取未定義的屬性“數據庫”

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傳遞props.db 。 我也（希望）將問題隔離到setState ，因為我的console.log(filtered)調用可以按預期工作，這意味着在第一個“ pass”中， prop/props.db已明確定義。 我猜想這與setState的非阻塞性質有關，但是我無法終生弄清楚為什么這會導致prop的值undefined 。

編輯：根據要求為db初始化代碼：

import * as firebase from 'firebase'

class App extends Component {

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

  }

然后將其傳遞到Category組件：

<CategoryList db={firebase}/>

然后將其傳遞到上面的ActivityList組件中：

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

同樣，即使在ActivityList組件中，似乎它也已成功從數據庫讀取，直到我調用setState為止。

Answer 1

編輯：

在聊天中，我們發現他輸入了錯誤的內容。 在他的問題帖子中沒有提到這一點。

import Activity from './ActivityList'

現在，他的地圖函數創建了ActivityList組件，而不是Actitvity組件。

但是應該是：

import Activity from './Activity'