Почему данные из Firebase не отображаются в моем FlatList (React Native)?

Question

Я новичок в React Native и пытаюсь отобразить свои данные из Google Firebase в FlatList. Там нет никаких ошибок, но ничего не отображается в моем списке. Я знаю, что раздел componentDidMount () работает, так как, когда я добавляю console.log внутри, он показывает, что предложения имеют правильные объекты внутри. Я не уверен, почему это не появляется на экране, хотя ...

import React, {Component} from 'react';
import {View, Text, StyleSheet, TextInput, SafeAreaView, Platform, Image, FlatList, TouchableHighlight} from "react-native";
import { List, ListItem, Divider } from 'react-native-elements';
import Icon from "react-native-vector-icons/Ionicons";

import { db } from '../config';
let offersRef = db.ref('/offers');

class Home extends Component {

  state = {
    offers: [],
    currentUser: null
  };


  componentDidMount() {
    let mounted = true;
    if(mounted){
      offersRef.on('value', snapshot => {
        let data = snapshot.val();
        let offers = Object.values(data);
        this.setState({ offers });
      });
    }
    return () => mounted = false;
  }

  pressRow()
  {
    console.log(item)
  }


  renderItem(item){
    return(
      <TouchableHighlight onPress={() => {this.pressRow(item)}}>
          <Text>
            {item.name}
          </Text>
      </TouchableHighlight>
    )
  }

  render() {
    const { currentUser } = this.state
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <FlatList>
            data = {this.state.offers}
            renderItem = {({ data }) => (
              <TouchableHighlight onPress={() => {this.pressRow(data)}}>
              <Text>
                {data.name}
              </Text>
              </TouchableHighlight>
            ) }
          </FlatList>
      </SafeAreaView>
    ); 
  }
}
export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Мой код указан выше, будет очень признателен, если кто-то сможет помочь! Спасибо ...

Answer 1

Эй, пожалуйста, внесите следующие изменения в ваш метод рендеринга: -

Замените «data» в renderItem на «item» и на renderItem где угодно соответственно.

<SafeAreaView style={{ flex: 1 }}>
        <FlatList
            data = {this.state.offers}
            renderItem = {({item} ) => (
              <TouchableHighlight onPress={() => {this.pressRow(item)}}>
              <Text>
                {item.name}
              </Text>
              </TouchableHighlight>
            ) }
          />
      </SafeAreaView>