Firebase + React Native - захватить каждый идентификатор документа

Question

Я застрял на этом целую вечность, пытаясь выяснить, как я могу консоль регистрировать каждый идентификатор документа Firebase Cloudstore, когда я нажимаю на каждый визуализированный элемент FlatList.

Я могу получить определенный ключ / идентификатор с помощьюиспользуя onPress={() =>{console.log(this.state.posts[0].key)}} и т. д. Но я не знаю, как получить каждый из них в отдельности.По сути, мне нужен только идентификатор документа TouchableOpacity, который я нажал.Не только [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>
    )
  }
}

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

Дайте мне знать, если это не имеет никакого смысла:)