为什么来自 Firebase 的数据没有在我的 FlatList (React Native) 中呈现？

Question

我是 React Native 的初学者，我正在尝试在 FlatList 中显示来自 Google Firebase 的数据。 没有弹出错误，但我的列表中没有显示任何错误。 我知道 componentDidMount() 部分是有效的，因为当我在里面添加一个 console.log 时，它会显示 offer 里面有正确的对象。 我不知道为什么它没有显示在屏幕上...

 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

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

将 renderItem 中的“data”替换为“item”，并相应地替换为 renderItem 中的“data”。

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