FlatList 条件渲染 if {user === owner ||猜测}

Question

在我的应用程序中，我渲染了一个 Expo FlatList 来显示创建的事件。

如果用户创建或加入了此活动，他应该能够看到图像。如果没有，它们应该被隐藏。

我现在会预先将 creator 和 guests 存储在 database and would have to compare this with the currentUser from the Firebase Auth 中。

但是，我面临的问题是我无法告诉 FlatList 哪些项目应该呈现，哪些不应该呈现。

有谁知道条件渲染 FlatList 的解决方案吗？

完整代码

import React, { Component } from 'react';
import { FlatList, Box,  } from "native-base";
import { StyleSheet } from 'react-native'
import EventCard from "./EventCard.js";
import { collection, getDocs } from 'firebase/firestore';
import { firestore, auth } from '../firebase.js'
import { getStorage } from "firebase/storage"

export default class Events extends Component {

    constructor(props) {
        super(props);
        this.currentUser = auth.currentUser
        this.navigation = this.props.navigation
        this.storage = getStorage()
        this.querySnapshot = getDocs(collection(firestore, 'events'));
        this.state = {
            isLoading: true,
            fetch: false,
            eventData: {
                adress: '',
                hosts: '',
                description: '',
                eventtitle: '',
                invitecode: '',
                key: '',
                timestamp: '',
                owner: '',
            }
        }
    }

    componentDidMount() {
        this.loadEventsFromFirebase()

    }

    //  reload on pull down
    onRefresh() {
        this.setState({
            fetch: true
        });
        this.loadEventsFromFirebase()
    }

    loadEventsFromFirebase() {
        let data = []
        this.querySnapshot.then(querySnapshot => {
            querySnapshot.docs.map(doc => {
                data.push(doc.data())
            })
            this.setState({
                eventData: data,
                fetch: false,
            });
        });

    }

    render() {

        return (
            <Box style={styles.container} _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }}>
                <FlatList
                    showsVerticalScrollIndicator={false}
                    onRefresh={() => this.onRefresh()}
                    refreshing={this.state.fetch}
                    data={this.state.eventData}
                    keyExtractor={item => item.key}
                    renderItem={({ item }) => (<EventCard key={Date.now()} eventData={item} />
                    )}
                />
            </Box>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        alignSelf: 'stretch',
        alignItems: 'center'
    },
})

Answer 1

您可以在将事件数据设置为状态之前对其进行过滤

我假设，事件有一个 owner 属性这是 userId，它在 guests 属性

中有一个 userId 数组

loadEventsFromFirebase() {
    let data = []
    this.querySnapshot.then(querySnapshot => {
        querySnapshot.docs.map(doc => {
            data.push(doc.data())
        })
        const allowedData = data.filter(d=> (d.owner == this.currentUser) || d.guests.includes(this.currentUser));
        this.setState({
            eventData: allowedData,
            fetch: false,
        });
    });

}

FlatList 条件渲染 if {user === owner ||猜测}

FlatList conditional rendering if {user === owner || gues}

javascript

firebase

react-native

expo

react-native-flatlist

完整代码