[英]How to Iteration object into flatlist - react native?
我正在开发本机的聊天列表,
并将消息主体“实时”保存到firebase中,这样的数据库结构
{
dtnMG3dVEQXL1TPct3awl927jax2: // user key
-LmUSeyWtBPqcoN8l6fd: // msg body
0: {user: {…}, text: "hey", createdAt: "2019-08-17T12:04:09.182Z"
-LmUgcbdzElxWpLkN-F9: [{…}]
-username: "Bran" // user name
y5eAQppoEZRELsDL3hLbY5b0A763:
-Lm_K6xwDVqaA7UIF7hf: [{…}]
-Lm_LXWdK1rNk-G3_NlC: [{…}]
-username: "Alex"
}
在获取数据之后,如上所示,我得到了对象,现在,我想将这些数据添加到<FlatList/>
但是我无法迭代这些值,因为它包含带有嵌套值的嵌套对象,依此类推! 在renderItem
内置方法中,因为它不是对象的平面数组
因此,我该如何循环该对象并保留每个用户键,因为它们都压在这些键上,所以我想避免迭代列表!
最终结果应该是这样的
这是函数:
_getProviders = () => {
let currentUser = firebase.auth().currentUser.uid;
let refVal = firebase.database().ref(`Messages/${currentUser}`);
let providers = {};
refVal
.once("value")
.then(snapshot => {
snapshot.forEach(child => {
let providerKeys = child.key;
Object.assign(providers, { [providerKeys]: child.val() });
});
})
.then(() => {
let keys = [];
Object.keys(providers).map(item => {
keys.push(item);
});
keys.forEach(key => {
firebase
.database()
.ref("providers")
.child(key)
.once("value")
.then(providersShot => {
let username = providersShot.val().username;
console.log(username);
providers[key]["username"] = username;
});
});
// console.log(providers);
this.setState({ providers }, () =>
console.log(this.state.providers) // here is the above object!!
);
});
};
<FlatList
key={Math.random() * 1000}
data={this.state.providers}
contentContainerStyle={{ flexGrow: 1 }}
ListEmptyComponent={this._listEmptyComponent()}
extraData={this.state}
renderItem={({ item }) => {
console.log(item);
return (
<TouchableOpacity>
<View style={styles.parent}>
<Icon name="ios-contact" size={50} color="#4d8dd6" />
<View style={{ flex: 1, alignSelf: "flex-start" }}>
<Text
style={{
color: "#000",
fontSize: 17,
marginHorizontal: 25,
alignSelf: "stretch"
}}
>
{item.username}
</Text>
<Text
style={{
color: "#a1a1a1",
marginHorizontal: 35,
marginVertical: 5,
alignSelf: "stretch"
}}
numberOfLines={1}
lineBreakMode="tail"
>
{item.lastMssg.text}
</Text>
</View>
<Icon name="ios-time" size={20} color="#ddd" />
</View>
</TouchableOpacity>
);
}}
keyExtractor={(item, index) => index.toString()}
/>
您可以做的一件事是,在获取整个内容时,请尝试将其排序到单独的列表中,然后将其传递给state和flatlist data = {this.state.sortedArrar},不要传递那么大的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.