为什么Firebase中的数据无法在我的FlatList（React Native）中呈现？

debugcn 发表于 Dev

梅根·马克（Megan Make）

我是React Native的初学者，我试图在FlatList中显示来自Google Firebase的数据。没有弹出的错误，但是我的列表中没有任何显示。我知道componentDidMount（）部分可以正常工作，就像我在其中添加console.log时所显示的那样，offers具有正确的对象。我不确定为什么它没有显示在屏幕上...

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',
  },
});

我的代码在上面，如果有人能够提供帮助，将不胜感激！谢谢...

RB RB

嘿，请在渲染方法中进行以下更改：

将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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。