Firebase + React Native - 获取每个文档 ID

IT技术 javascript reactjs firebase react-native google-cloud-firestore
2021-05-18 12:12:43

我多年来一直坚持这个问题,试图弄清楚当我按下每个呈现的 FlatList 项目时,如何分别控制台记录每个 Firebase Cloudstore 文档 ID。

我可以通过使用onPress={() =>{console.log(this.state.posts[0].key)}}来获取某个密钥/ID 。但我不知道如何分别获取每个密钥本质上,我只想要我按下的 touchableOpacity 的文档 ID。不只是 [0]

屏幕截图位于应用程序布局的下方,因此您可以了解并了解代码示例

PostsLayout.js

export default class PostsLayout extends React.Component {

  render() { 
    const {summary, stringTime, user} = this.props;

    return (         

        <TouchableOpacity 
          style={styles.container}
          onPress={this.props.onPress} 
        >
            <PostsUser user={user}/>
            <PostsSummary summary={summary}/>
            <PostsDate time={stringTime}/>
        </TouchableOpacity>
    )
  }
}

平面列表布局.js

    export default class FlatListLayout extends React.Component { 

    render() { 
        return ( 
                <ScrollView >
                    <FlatList 
                        data={this.props.data}
                        renderItem={({item}) => <PostsLayout {...item} onPress={this.props.onPress}/>}
                    />
                </ScrollView>
        )
    }
}

屏幕布局.js

export default class ScreenLayout extends React.Component { 

    state = {
        posts: []
    }

    db = firebase.firestore()
    path = this.db.collection('usersData').doc(firebase.auth().currentUser.uid).collection("posts")


    onCollectionUpdate = (querySnapshot) => {
        const posts = [];    
            querySnapshot.forEach((doc) => { 
                const {summary, time, stringTime, user, userId} = doc.data();

                posts.push({
                    key: doc.id, doc, summary,
                    time, stringTime, user, userId
                });
            });

            this.setState({
                posts
            });

    }

    componentDidMount() {
        const {currentUser} = firebase.auth();
        this.setState({currentUser})

        this.unsubscribe = this.path.onSnapshot(this.onCollectionUpdate) 
    }

    componentWillUnmount() {
        this.unsubscribe(); 
    }

    render() { 
        return ( 
        <FlatListLayout
            data={this.state.posts}
            onPress={() => {console.log(this.state.posts[0].key)}}
        />
        )
    }
}

这是我的应用程序屏幕的示例。 每个灰色框都是一个 touchableOpacity,当我点击它时,我想控制台记录 firebase cloudstore 文档 ID

感谢您阅读本文,请帮助:)

1个回答

因此,最简单的解决方法是从子级别的原始新闻事件发送一个函数参数。例如,PostsLayout 有主要的 onPress,因此在此调用中只需发送您需要的任何数据,每个组件都会有与该组件相关的特定数据。由于每个react孩子都是独一无二的。PostsLayout.js

export default class PostsLayout extends React.Component {

  handleOnPress = () => {
   const { onPress, index } = this.props;
   if( typeof onPress === 'function') {
     onPress(this.props, index); // here pass anything you want in the parent level, like even userm stringtime etc
   }
  }

  render() { 
    const {summary, stringTime, user} = this.props;

    return (         

        <TouchableOpacity 
          style={styles.container}
          onPress={this.handleOnPress} 
        >
            <PostsUser user={user}/>
            <PostsSummary summary={summary}/>
            <PostsDate time={stringTime}/>
        </TouchableOpacity>
    )
  }
}

平面列表布局.js

    export default class FlatListLayout extends React.Component { 

    render() { 
        return ( 
                <ScrollView >
                    <FlatList 
                        data={this.props.data}
                        renderItem={({item, index }) => <PostsLayout {...item} index={index} onPress={this.props.onPress}/>}
                    />
                </ScrollView>
        )
    }
}

屏幕布局.js

export default class ScreenLayout extends React.Component { 

    state = {
        posts: []
    }

    db = firebase.firestore()
    path = this.db.collection('usersData').doc(firebase.auth().currentUser.uid).collection("posts")


    onCollectionUpdate = (querySnapshot) => {
        const posts = [];    
            querySnapshot.forEach((doc) => { 
                const {summary, time, stringTime, user, userId} = doc.data();

                posts.push({
                    key: doc.id, doc, summary,
                    time, stringTime, user, userId
                });
            });

            this.setState({
                posts
            });

    }

    componentDidMount() {
        const {currentUser} = firebase.auth();
        this.setState({currentUser})

        this.unsubscribe = this.path.onSnapshot(this.onCollectionUpdate) 
    }

    componentWillUnmount() {
        this.unsubscribe(); 
    }

    render() { 
        return ( 
        <FlatListLayout
            data={this.state.posts}
            onPress={(data, index) => {console.log(data); console.log(this.state.posts[index].key)}}
        />
        )
    }
}

如果这没有任何意义,请告诉我:)