从 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
也将是一个对象,它不能在<Text>
中立即呈现,您必须从项目对象中提取一个文本值,然后将其呈现为:<Text>SOME_TEXT_NOT_AN_OBJECT</Text>
您可以将您的人员对象转换为数组并将其传递给<FlatList
,如下所示:
render()
const inProgress, people, error = this.props.peopleData;
let ArrayOfPeopleObject = Object.values(people)
return (
<FlatList
data=ArrayOfPeopleObject
renderItem=this._renderItem
/>
);
现在_renderItem
方法中的每个item
都将是一个对象,您可以从任何键中提取值并将其呈现在<Text>
中。
【讨论】:
【参考方案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 不渲染数组中的项目