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

Question

多年来，我一直在试图弄清楚当我按下每个呈现的 FlatList 项目时，如何单独记录每个 Firebase Cloudstore 文档 ID。

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

App 布局的屏幕截图如下，以便您了解和代码示例

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

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

Answer 1

因此，最简单的解决方法是从子级别的原始新闻事件中发送一个函数参数。 例如，PostsLayout 有主 onPress，所以在这个调用中只需发回你需要的任何数据，每个组件都会有与组件相关的特定数据。由于每个反应孩子都是独一无二的。 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

    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

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

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