Состояние в компоненте реакции не будет отображаться

Question

Мой компонент реакции вообще не будет загружать данные из состояния. Моя функция загрузки работает, как и ожидалось, как и рендеринг для нее, однако, несмотря на то, что состояние обновляется (я зарегистрировал его, оно возвращает ожидаемые данные), ничего с рендером, связанным с ним. Если сообщения пусты, тег <p>nothing</> не отображается, а если есть данные, он не печатается в теге p и не загружается в мою карусель.

import React, { Component } from 'react';
import { withFirebase } from '../Firebase';
import AliceCarousel from 'react-alice-carousel';
import 'react-alice-carousel/lib/alice-carousel.css';

import PostItem from '../Market/PostItem';

class LandingPosts extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: '',
      loading: false,
      posts: [],
      limit: 5,
    };

  }

  componentDidMount() {
    this.onListenForMessages();
  }

  onListenForMessages = () => {
    this.setState({ loading: true });

    this.props.firebase
      .collectionGroup('settings')
      .where('homepagepost', '==', true)
      .get().then(snapshot => {

      let posts = [];

      snapshot.forEach(doc => {

        doc.ref.parent.parent.get().then(doc => {
          posts.push({ ...doc.data(), uid: doc.id });
          console.log(posts);
        });

      });

      this.setState({ posts: posts.reverse(), loading: false });

    });
  };


  responsive = {
    0: { items: 1 },
    1024: { items: 3 },
  };

  render() {
    const { loading } = this.state;

    return (
      <div>
        {loading && <div>Loading ...</div>}
        {this.state.posts && (
          <p>{this.state.posts[0]}</p>
        )}
        {!this.state.posts && (
          <p>nothing</p>
        )}
        <AliceCarousel
          items={this.state.posts.map(item => {return <PostItem data={item}/>})}
          responsive={this.responsive}
          autoPlayInterval={2000}
          autoPlayDirection="rtl"
          autoPlay={true}
          fadeOutAnimation={true}
          mouseDragEnabled={true}
          disableAutoPlayOnAction={true}
          buttonsDisabled={true}
        />
      </div>
    );
  }
}

export default withFirebase(LandingPosts);

Answer 1

Я думаю, следующий код является асинхронным в вашем случае.

doc.ref.parent.parent.get().then(doc => {
    posts.push({ ...doc.data(), uid: doc.id });
    console.log(posts);
});

Если это так, попробуйте добавить состояние настройки в тогда или создать массив обещаний, как это.

posts.push(
 doc.ref.parent.parent.get().then(doc => {
    posts.push({ ...doc.data(), uid: doc.id });
    console.log(posts);
 });
)
Promise.all(posts).then((_posts)=>this.setState({ posts: _posts.reverse(), loading: false });)

Answer 2

Я думаю, что вы должны "повторить" вашу декларацию состояния внутри render. Примерно так:

const {текст, загрузка, сообщения, лимит} = this.state

По крайней мере, так оно и есть в моих компонентах