时间戳

首页 > 解决方案 > 为什么在 react native 中使用 flatlist 不会在屏幕上显示 firebase 数据

javascript - 为什么在 react native 中使用 flatlist 不会在屏幕上显示 firebase 数据

问题描述

但是当我使用 console.log 显示数据时，它会正确显示 import React,{useState,useEffect,Component} from 'react'; 从 'react-native' 导入 {StyleSheet,View,Text,TextInput,TouchableOpacity, Button, FlatList}；从 'react-native-paper' 导入 { DataTable }；从'../config/fire'导入{fire}；从'react-native-elements'导入{ListItem，SearchBar}；函数 Donorlist(){ const[Donors,setDonors]=useState([]); const fetchDonors=async()=>{ const response=fire.firebase_.firestore().collection('Donors'); 常量数据=等待响应.get(); data.docs.forEach(item=>{ setDonors([...Donors,item.data()]); //console.log("hI I AM IN DONORS FETCH LIST"); })

}
useEffect(()=>{
    fetchDonors();
    
},[])
return (
    <View>
      <FlatList
      data={Donors}
      renderItem={({item})=>(
        console.log(item.name),
        <Text>
        {item.name}
      </Text>      )}/>

            
      {
             
            
           /*
             Donors.map((Donor,index)=>{
          return(
               console.log(Donor),
            <View className="blog-container">
             <Text>Donor List</Text>
             
            <DataTable>
<DataTable.Header>
      <DataTable.Title
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }} >Name</DataTable.Title>
      <DataTable.Title
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }}  >Email</DataTable.Title>
      <DataTable.Title
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }}  >Phone</DataTable.Title>
      <DataTable.Title
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }}  >Country</DataTable.Title>
      <DataTable.Title 
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }} >State</DataTable.Title>
      <DataTable.Title >City</DataTable.Title>
      <DataTable.Title 
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }} >Pin</DataTable.Title>     
    </DataTable.Header>
     <DataTable.Row>
    <DataTable.Cell ><Text>{Donor.name}</Text></DataTable.Cell>
      <DataTable.Cell >{Donor.email}</DataTable.Cell>
      <DataTable.Cell >{Donor.phone}</DataTable.Cell>
      <DataTable.Cell >{Donor.name}</DataTable.Cell>
      <DataTable.Cell >{Donor.email}</DataTable.Cell>
      <DataTable.Cell >{Donor.phone}</DataTable.Cell>
      <DataTable.Cell >{Donor.phone}</DataTable.Cell>

      
     </DataTable.Row> 
    
    <DataTable.Pagination
      page={1}
      numberOfPages={3}

      onPageChange={page => {
        console.log(page);
      }}
      label="1-2 of 6"
    />


</DataTable>
<View>
  <Text>List Data</Text>
<Text>{Donors.name}</Text>
  </View>

</View>
      
      )
        })*/
      }
      

    </View>
  );
}
export default Donorlist;

标签： javascriptreactjsreact-native

解决方案

一些原因

1）渲染项中的文本组件没有限制任何视图试试这个 <View> <Text>{item.name}</Text> </View>

  1. keyExtractor={item=>item.key}将此添加到 flatlist 中，其中键是字符串值，在您的数据中是唯一的，例如 id 或其他内容

这是我的代码，可能对你有帮助

const itembuilder=({item,index})=>

{

 return(

   <View
        style={{
        margin:10,borderRadius:20,shadowOpacity:0.5,
        shadowOffset:{height:-15,width:15},
        shadowColor:'#FFF8DC'
        ,justifyContent:'center',shadowRadius:25,elevation:15,
        height:200,
        marginBottom:20,
        backgroundColor:'white'}}>
        
       <Text>{item.name}</Text>

       </View>
        
    )
}
 <FlatList
    
    
    style={{height:500}}
    data={product}
    keyExtractor={item=>item.key}
    renderItem={itembuilder}
    >

    </FlatList>

推荐阅读