Question

我的react组件根本不会从状态加载数据。尽管状态更新（我记录了它，它确实返回了预期的数据）与我的渲染相关，但我的加载函数以及它的渲染均按预期方式工作。如果帖子为空，则<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);
});

如果是这样，请尝试在then中添加设置状态，或创建这样的promise数组。

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

至少这就是我将其包含在组件中的方式

React组件中的状态不会呈现

2 个答案: