javascript - setState() 导致 props 未定义

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 。我还(希望)将问题隔离到 setState ，因为我的console.log(filtered)调用按预期工作，这意味着在第一个“传递”时，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'

现在他的 map 函数创建了 ActivityList 组件而不是 Activity 组件。

但应该是:

import Activity from './Activity'