从 Firebase 渲染 FlatList 中的数据

Posted

技术标签:

【中文标题】从 Firebase 渲染 FlatList 中的数据【英文标题】:Rendering data in FlatList from firebase 【发布时间】:2018-04-11 01:54:14 【问题描述】:

我正在使用 React Native 0.49。我从 firebase 获取数据,用户列表 users/,此列表中的每个项目都设置为这样 firebase.database().ref('users/' + userId).set(userInfo) userId 是 currentUser 的 uid

现在我正在取回(在行动中 - redux):

export function getPeople()
    return (dispatch) => 
        dispatch(getPeopleRequest());
        getData().then(result => 
            dispatch(getPeopleSuccess(result.val()))
        )
        .catch(error => 
            dispatch(getPeopleFailure(error))
        ); 
    


const getData = () => 
    const userRef = firebase.database().ref('users/').limitToFirst(20);
    return userRef.once('value');     

在组件中,我试图渲染FlatList中的数据,但它没有渲染任何东西,我不知道我做错了什么:

componentDidMount()
   this.props.getPeople();

_renderItem = ( item ) => (

    <View style=flex: 1>
        <Text>item</Text>
    </View>
);

render()
    const  inProgress, people, error  = this.props.peopleData;
    return (
        <FlatList
            data=people
            renderItem=this._renderItem 
        />
    );

当控制台记录 people 这是结果: cpycwkz7exVBzmhaLEtHjMW66wn1: …, UbIITfUANmb63cYE2x7dZRZ0pfK2: …

【问题讨论】:

【参考方案1】:

除对象数组外的平面列表,但 Firebase 将数据作为映射返回,例如 key: value 对,因此您应该将此映射转换为数组,您可以安装 lodash 模块并使用 _.values() 函数来执行此操作

【讨论】:

我应该把那段代码放在哪里?在getData() 函数中?还是我在减速机中这样做?【参考方案2】:

FlatList 组件期望其 data 属性是一个数组。您将它作为对象传递。您可以将其更改为对象数组。然后在您的_renderItem 方法中,item 也将是一个对象,它不能在&lt;Text&gt; 中立即呈现,您必须从项目对象中提取一个文本值,然后将其呈现为:&lt;Text&gt;SOME_TEXT_NOT_AN_OBJECT&lt;/Text&gt;

您可以将您的人员对象转换为数组并将其传递给&lt;FlatList,如下所示:

render()
    const  inProgress, people, error  = this.props.peopleData;
    let ArrayOfPeopleObject = Object.values(people)
    return (
        <FlatList
            data=ArrayOfPeopleObject
            renderItem=this._renderItem 
        />
    );

现在_renderItem 方法中的每个item 都将是一个对象,您可以从任何键中提取值并将其呈现在&lt;Text&gt; 中。

【讨论】:

【参考方案3】:

Flatlist 数据需要数组中每个对象的键,您可以像这样转换 firebase 结果:

Object.entries(peopleFromFirebase).map(item => (...item[1], key: item[0]));

所以来自 firebase 的 json 像这样:


  cpycwkz7exVBzmhaLEtHjMW66wn1: 
    name: 'wade owen watts', 
    phone:'+447...'
  , 
  UbIITfUANmb63cYE2x7dZRZ0pfK2: 
    name: 'Helen Harris', 
    phone:'+448...'
  

变成:

[
  
    key: 'cpycwkz7exVBzmhaLEtHjMW66wn1',
    name: 'wade owen watts', 
    phone:'+447...'
  , 
  
    key:'UbIITfUANmb63cYE2x7dZRZ0pfK2',
    name: 'Helen Harris', 
    phone:'+448...'
  
]

【讨论】:

以上是关于从 Firebase 渲染 FlatList 中的数据的主要内容,如果未能解决你的问题,请参考以下文章

React Native FlatList 不渲染数组中的项目

如何反应原生重新渲染 Flatlist?

在 FlatList 中获取渲染视频的参考

FlatList 不渲染从服务器获取的父组件数据,在 React Native 的子组件中

状态变化时如何防止 FlatList 重新渲染

React Native Flatlist 只渲染一行