Firebase + React Native-抓取每个文档ID [英] Firebase + React Native - Grab each Document ID

问题描述

多年来，我一直坚持这一点，试图弄清楚当我按下每个渲染的FlatList项目时如何分别控制台记录每个Firebase Cloudstore文档ID.

I have been stuck on this for ages trying to figure out how I can console log each Firebase Cloudstore document ID separately when I press onto each rendered FlatList item.

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

I can grab a certain key / id by using onPress={() =>{console.log(this.state.posts[0].key)}} etc. But I dont know how to grab each one separately. In essence I only want the document ID of the touchableOpacity I have pressed. Not just [0]

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

Screenshots are below of App layout so you can get an understanding and also code example

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

FlatListLayout.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>
        )
    }
}

ScreenLayout.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)}}
        />
        )
    }
}

感谢您阅读本文档，请提供帮助:)

Thank you for reading this and please help :)

推荐答案

最简单的解决方法是从子级的原始press事件发送一个函数自变量.例如，PostsLayout具有主要的onPress，因此在此调用上仅发送回您需要的任何数据，每个组件将具有与该组件相关的特定数据.因为每个孩子的反应都是独一无二的.PostsLayout.js

So the easiest fix would be send a function argument from the original press event in the child level. For example, PostsLayout has the main onPress, so on this call just send back any data you need, each component will have specific data related to the component. As each react child is unique. 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>
    )
  }
}

FlatListLayout.js

FlatListLayout.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>
        )
    }
}

ScreenLayout.js

ScreenLayout.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)}}
        />
        )
    }
}

让我知道这是否没有道理:)

Let me know if this doesn't make any sense :)

这篇关于Firebase + React Native-抓取每个文档ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！