[英]React-Native Firebase Display array of objects using FlatList
我正在尝试显示一些Firebase数据,但是什么也没有显示。
export default class ListGroupScreen extends Component {
constructor(){
super();
this.state = {
dataArray: [],
}
}
componentDidMount() {
let that = this;
firebase.database().ref('/groups').on('child_added', function (data){
that.setState({
dataArray: data.val()
})
})
}
render() {
console.log(this.state.dataArray);
console.log(this.state.dataArray[0]);
return (
<List>
<FlatList
data={this.state.dataArray}
renderItem={({ item }) => (
<ListItem
title={<Text>{item.groupTitle}</Text>}
time={<Text>{item.groupTime}</Text>}
/>
)}
/>
</List>
);
}
}
console.log(this.state.dataArray); 给我数据库中的所有项目,但是console.log(this.state.dataArray [0]); 给我不确定的 如下所示:
原因是.on('child_added')
为groups
节点中的每个项目返回一个对象。
在您的情况下,您需要使用.once('value')
,它将为您返回包含项目的集合( 对象 ),您必须将其转换为数组:
firebase.database().ref('/groups').once('value', function(snapshot) {
var returnArray = [];
snapshot.forEach(function(snap) {
var item = snap.val();
item.key = snap.key;
returnArray.push(item);
});
// this.setState({ dataArray: returnArray })
return returnArray;
});
FlatList
反应本地组件期望数据props是一个数组。 即使您在承包商中声明为数组,您仍将其作为对象传递; 但是在componentDidMount
您覆盖了对象。 您可以将其更改为对象数组。
console.log(this.state.dataArray[0])
绝对给出undefined
因为它不是数组
export default class ListGroupScreen extends Component {
constructor(){
super();
this.state = {
data: null,
}
}
componentDidMount() {
const that = this;
firebase.database().ref('/groups').on('child_added', function (data){
that.setState({
data: data.val()
})
})
}
render() {
const dataArray = Object.values(this.state.data)
return (
<List>
<FlatList
data={dataArray}
renderItem={({ item }) => (
<ListItem
title={<Text>{item.groupTitle}</Text>}
time={<Text>{item.groupTime}</Text>}
/>
)}
/>
</List>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.