Вставить данные в массив внутри реагировать родной

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

Ваши данные уже находятся в массиве, проверьте console.log("Array " + merchants.business_name), очевидно, это дает undefined причину доступа к недопустимому элементу.Попробуйте получить доступ к первому элементу в консоли, например,

console.log("Array " + merchants[0].business_name) or 
console.log("Array " + merchants)

Answer 2

Вызов 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 в вашем коде.