React-Native Firebase 使用 FlatList 显示对象数组答案

【问题标题】：React-Native Firebase Display array of objects using FlatListReact-Native Firebase 使用 FlatList 显示对象数组
【发布时间】：2019-10-02 07:49:21
【问题描述】：

我正在尝试显示一些 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]);给我未定义。如图所示：

这是数据库的样子：

【问题讨论】：

标签： javascript firebase react-native firebase-realtime-database react-native-flatlist

【解决方案1】：

原因是.on('child_added') 为groups 节点中的每个项目返回一个对象。

在您的情况下，您需要使用.once('value')，它将返回一个包含项目的集合（object），您必须将其转换为数组：

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;  
});

【讨论】：

【解决方案2】：

FlatList react native 组件期望数据道具是一个数组。您将它作为对象传递，即使您在承包商中声明为数组；但是在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>
        );
    }
}

【讨论】：