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传递了firebase。我（也希望）将问题隔离到setState，因为我的console.log(filtered)调用按预期工作，这意味着在第一个“传递”中，prop/props.db是明确定义的。我猜这与setState的非阻塞性质有关，但我不能为我的生活弄清楚为什么这会导致道具的价值为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 Components而不是Actitvity Components。

但它应该是：

import Activity from './Activity'

setState（）导致道具未定义

1 个答案: