Question

所以我试图从Firebase获取子值，然后将其放在数组上，然后将其显示为列表，但我无法使其正常工作。

我使用ReactNative Elements Lists来显示列表。

这是我的代码

const list = [];                                                        
export default class ContactPerson extends Component<Props> {
readData() {
    firebase.database().ref('contactperson').on('value', function(snapshot) {
        snapshot.forEach(function (childSnapshot) {
            var data = childSnapshot.val();
            list.push(data);
        });
    });
}
componentDidMount() {
    this.readData();
}
renderRow ({ item }) {
    return (
        <ListItem
            roundAvatar
            title={item.nama}
            subtitle={item.no_hp}
            avatar={{uri:item.image_url}}
        />
    )
}
render () {
    return (
        <List>
            <FlatList
                data={list}
                renderItem={this.renderRow}
                keyExtractor={item => item.nama}
            />
        </List>
    )
}}

然后是Firebase数据库结构： Screenshot

Answer 1

您必须将项目传递给创建单个元素的方法，如下所示：

renderRow (item) {
   return (
    <ListItem
        roundAvatar
        title={item.nama}
        subtitle={item.no_hp}
        avatar={{uri:item.image_url}}
    />
)}
render () {
  return (
    <List>
        <FlatList
          data={list}
          renderItem={(item) => this.renderRow(item)}
          keyExtractor={item => item.nama}
        />
    </List>
  )
}}

请参阅documentation for flatlist

反应本地Firebase将子值转换为列表

1 个答案: