Запрос Firebase с React Native не отображается на моем экране (но отображается на console.log) - PullRequest
Новая
       9

Запрос Firebase с React Native не отображается на моем экране (но отображается на console.log)

0 голосов
/ 28 ноября 2018

Мои данные отображаются на console.log, как и предполагалось, но не на моем экране.Вот скриншот журнала консоли.

enter image description here

А вот мой код: 

componentWillMount = () => {
this.getData();
}

getData(){
  const { currentUser } = firebase.auth();
    firebase
    .database()
    .ref(`/users/${currentUser.uid}/data/`)
    .orderByKey()
    .on('child_added', snap =>  {

      //Is this correct or does it need to be formatted a different way?
      snap.key, 
      snap.val().Weight 

      //note that the console logs below displays the data
      console.log(snap.key)
      console.log(snap.val().Weight)

    }) 
}

renderRow = () => {
  return (
    <View style={[styles.card, styles.cardBorderTop]}>
      <Text>
        {snap.key} //Is this the correct way to reference this value?
      </Text>
      <Text style={[styles.textRight]}>
        {snap.val().Weight} //Is this the correct way to reference this value?
      </Text>
    </View>
  )
}

  render() {
    return (
      <View style={[styles.container]}>
        <FlatList
          data={this.getData} //Is this the correct data reference?
          renderItem={this.renderRow} 
        />
      </View>
    );
  }
}

Вот как мой экран рендерит,Обратите внимание, что я ожидаю, что данные будут отображаться в FlatList.enter image description here

Любая помощь будет принята с благодарностью.

Кстати, теперь я понимаю, что мне нужно хранить даты как ISO-8601, чтобы ониможно правильно отсортировать, что я и сделаю после того, как выясню, как получить данные запроса для отображения на моем экране.

ОБНОВЛЕНИЕ Я понимаю, что мой вопрос не так ясен, как я планировал, и я прошу прощения за это.Мне нужно иметь возможность запрашивать мои данные с помощью ключа даты и веса ребенка .Я могу успешно сделать это, используя snap.key и snap.val (). Weight на консоли, однако это не похоже на то, что это правильная ссылка, необходимая для отображения данных в моем FlatList, и это то, что мне нужно помочь с,

Для справки, вот моя база данных Firebase: enter image description here

1 Ответ

0 голосов
/ 28 ноября 2018

Ваша getData функция в настоящее время ничего не возвращает, поэтому, хотя представление может вызывать getData(), оно ничего не получает от него.

Но простое добавление оператора return не поможет, так какданные загружаются асинхронно.В React вы должны вместо этого поместить данные в состояние вашего компонента (вызвав setState()), а затем использовать их оттуда в вашем рендерере.

В коде: 

componentWillMount = () => {
  this.setState({ data: [] });
  this.getData();
}

getData(){
  const { currentUser } = firebase.auth();
  firebase
    .database()
    .ref(`/users/${currentUser.uid}/data/`)
    .orderByKey()
    .on('child_added', snap =>  {
      var data = this.state.data;
      data.push({ key: snap.key, weight: snap.val().Weight });
      this.setState({ data: data });
    }) 
}

Такthis:

  • Инициализирует свойство data в состоянии с пустым массивом.
  • Добавляет каждый новый элемент в data, когда он поступает из базы данных.

С этим вы можете отобразить массив данных с помощью: 

renderRow = ({item}) => {
  return ( 
    <View style={[styles.card, styles.cardBorderTop]}> 
      <Text> 
        {item.key} 
      </Text> 
      <Text style={[styles.textRight]}>
        {item.Weight} 
      </Text>
    </View>
  )
}

render() {
  return (
    <View style={[styles.container]}>
      <FlatList
        data={this.state.data}
        renderItem={this.renderRow} 
      />
    </View>
  );
}

Этот последний бит может содержать синтаксические ошибки, так как я никогда не использовал FlatList.В случае сомнений сравните с документацией последнего здесь .

...