Question

我一直在尝试将数据从我的Firebase数据库推送到阵列，尽管从登录名看来好像没有提供数据

下面是日志

[15:36:08] Get Ref https://xxxx.firebaseio.com/merchants
[15:36:08] Gladiator Fitness
[15:36:08] Array undefined

这是我要执行的代码

componentWillMount() {
    let initialLoad = true;
    this.setState({loading: true});

    var merchants = [];

    merchantsRef.once('value').then((snapshot) => { // here too!
      // ... and add it to the matches array
      console.log(snapshot.val().business_name)
      merchants.push({
        business_name: snapshot.val().business_name,
        _key: snapshot.key
      })
      console.log("Array " + merchants.business_name)
    }).catch((error) => { // If you are planning to use this here
      console.log('Error fetching merchant data:', error)
    })

    this.setState({
      data: merchants,
      loading: false
    })

    if (initialLoad) {
      this.setState({loading: false});
      initialLoad = false;
    }

  }

Answer 1

对setState的调用必须在value回调中：

var merchants = [];

merchantsRef.once('value').then((snapshot) => { // here too!
  // ... and add it to the matches array
  console.log(snapshot.val().business_name)
  merchants.push({
    business_name: snapshot.val().business_name,
    _key: snapshot.key
  })
  console.log("Array " + merchants.business_name)
  this.setState({
    data: merchants,
    loading: false
  })
}).catch((error) => { // If you are planning to use this here
  console.log('Error fetching merchant data:', error)
})

之所以这样，是因为该回调是异步调用的，这意味着在您的代码中，带有setState数组的merchants将在填充数组之前被调用。

查看流程最简单的方法是使用一些放置良好的日志记录语句：

console.log("Before starting to load");
merchantsRef.once('value').then((snapshot) => { 
  console.log("Data loaded");
})
console.log("After starting to load");

运行此代码时，输出为：

开始加载之前

开始加载后

已加载数据

这可能不是您所期望的，但是可以完美解释为什么当您在代码中使用setState数组调用merchants时，数组为空的原因。

Answer 2

您的数据已经在数组中，请检查Task，显然它使console.log("Array " + merchants.business_name)导致访问无效元素。尝试在控制台中访问第一个元素，例如

undefined

将数据推送到React Native中的数组

2 个答案: