Не все передаваемые реквизиты никому не представляют, почему - PullRequest
Новая
       45

Не все передаваемые реквизиты никому не представляют, почему

0 голосов
/ 30 мая 2020

После того, как я получил данные от firebase и сохранил их в состоянии post, и я пытаюсь передать все данные другому компоненту, одни данные отправляются в опору, которая есть у кого-либо.

Любая идея относительно того, почему ? 

import React, { Component } from 'react';
import BlogPost from './BlogPost'
import firebase from '../../config/fbConfig'

class BlogList extends Component {
    state = {
        posts: []
    }
    componentDidMount() {

        const db = firebase.firestore()
        db.collection('posts').get().then(snapshot => {
            snapshot.docs.forEach(post => {
                let id = post.id
                let postData = post.data()
                postData['id'] = id
                this.setState({
                    posts: [...this.state.posts, postData]
                })
            })

        })

    }


    render() {
        console.log(this.state.posts)

        return (
            <>
                {this.state.posts ?
                    this.state.posts.map(post =>
                        <BlogPost post={post} key={post.id} />
                    )
                    : <h1>loading</h1>}

            </>
        );
    }
}

export default BlogList;

1 Ответ

1 голос
/ 30 мая 2020

Проблема заключается в том, как вы обновляете состояние, вы должны либо использовать functional setState, поскольку вы вызываете setState внутри al oop, и использовать this.state.data для обновления состояния, но обновления состояния не выполняются немедленно, а происходят асинхронно 

componentDidMount() {

    const db = firebase.firestore()
    db.collection('posts').get().then(snapshot => {
        snapshot.docs.forEach(post => {
            let id = post.id
            let postData = post.data()
            postData['id'] = id
            this.setState(prev => ({
                posts: [...prev.posts, postData]
            }))
        })

    })

}

или даже лучше обновить, когда все данные будут доступны 

componentDidMount() {

    const db = firebase.firestore()
    db.collection('posts').get().then(async snapshot => {
        const data = snapshot.docs.map(post => {
            let id = post.id
            let postData = post.data()
            postData['id'] = id
            return postData;
        });
        this.setState(prev => ({
            posts: [...prev.posts, ...data]
        }));

    })

}
...