Javascript react组件中的状态为赢得'；不渲染

我的react组件根本不会从状态加载数据。 我的加载函数和它的渲染一样工作，但是，即使状态更新（我记录了它，它确实返回了预期的数据）与渲染无关。 如果帖子为空，则不会显示

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);

import React，{Component}来自'React'；
从“../Firebase”导入{withFirebase}；
从“react alice carousel”导入AliceCarousel；
导入'react alice carousel/lib/alice carousel.css'；
从“../Market/positem”导入positem；
类LandingPosts扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文本：“”，
加载：false，
员额：[]，
限额：5，
};
}
componentDidMount（）{
this.onListenFormMessages（）；
}
onListenformMessages=（）=>{
this.setState（{loading:true}）；
这是消防基地
.collectionGroup（“设置”）
.where（'homepagepost'，'='，true）
.get（）.then（快照=>{
让posts=[]；
snapshot.forEach（doc=>{
doc.ref.parent.parent.get（）。然后（doc=>{
push（{…doc.data（），uid:doc.id}）；
控制台日志（posts）；
});
});
this.setState（{posts:posts.reverse（），load:false}）；
});
};
响应={
0:{items:1}，
1024:{items:3}，
};
render（）{
const{loading}=this.state；
返回(
{正在加载和正在加载…}
{this.state.posts&&(
{this.state.posts[0]}

)}
{！this.state.posts&&(
没什么

)}
{return}}
responsive={this.responsive}
自动播放间隔={2000}
autoPlayDirection=“rtl”
自动播放={true}
淡出动画={true}
MousedAgenabled={true}
DisableAutoPlayoAction={true}
buttonsDisabled={true}
/>
);
}
}
使用Firebase导出默认值（着陆柱）；

我认为您必须在render中“重复”您的状态声明。 像这样：

常数{ 文本， 加载， 帖子， 限制 }=这个州

至少在我的组件中是这样的

我认为您必须在渲染中“重复”您的状态声明。 像这样：

常数{ 文本， 加载， 帖子， 限制 }=这个州

---

至少在我的组件中是这样的

我认为，以下代码在您的情况下是异步的

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

---

我认为，以下代码在您的情况下是异步的

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

---

更新后的状态对象对于帖子来说是什么样子？@Christophengo，在记录状态时，我得到了这个

[{…}]0:category:“Cats”createdAt:Timestamp{秒：1571026757，纳秒：501000000}desc:“Lorem ipsum dolor sit ame…”图片：“这是一个照片链接”价格：1000标题：“可爱的小狗”uid:“I06U2O54p8Aqa5GxS5MU”用户ID:“tvgfDZ1aaJalEzI0nDkHMdYQxa03”\uuuu-proto\uuuu:Object-length:1\uu-proto\uuuuu:Array（0）

表达式

this.state.posts

将始终是真的-即

布尔（[]）

-您应该检查

posts.length

。当您传递

{this.state.posts[0]时，您的posts也是对象

要做出反应，它将把它当作一个扩展的JSX元素，而不是映射到它知道如何呈现的任何东西。您需要将帖子转换为适当的标记，或者如果您只是想调试数据，则将其转换为可读的字符串：

{JSON.stringify（this.state.posts[0]）

@Emissary我已经用.length检查过了，并且也进行了stringized调试，但是现在这两个调试元素始终处于活动状态，stringized调试返回0。尽管如此，我的旋转木马仍然没有呈现。更新后的状态对象对于posts是什么样子的？@christophengo，在记录状态时，我得到了这个

[{…}]0:类别：“猫”创建日期：时间戳{秒：1571026757，纳秒：501000000}描述：“Lorem ipsum dolor sit ame…”图片：“这是一个照片链接”价格：1000标题：“可爱的小狗”uid:“I06U2O54p8Aqa5GxS5MU”用户ID:“tvgfDZ1aaJalEzI0nDkHMdYQxa03”uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu：对象长度：1_uuuuuuuuuuuuuuuuuuuuuuuuuuuuu

表达式

this.state.posts

将始终是真实的-即

布尔（[]）

-您应该检查

posts.length

。当您传递

{this.state.posts[0]}时，您的posts也是对象

要做出反应，它将把它当作一个扩展的JSX元素，而不是映射到它知道如何呈现的任何东西。您需要将帖子转换为适当的标记，或者如果您只是想调试数据，则将其转换为可读的字符串：

{JSON.stringify（this.state.posts[0]）

@Emissary我已经用.length检查过了，也进行了stringized调试，但是，现在这两个调试元素始终处于活动状态，stringized调试返回0。尽管如此，我的旋转木马仍然没有呈现。这是它最初的呈现方式，但仍然不起作用。我只是再次尝试，但它仍然不会呈现。这是它最初的呈现方式最后是，但它仍然不起作用。我只是再试了一次，但它仍然无法呈现。在稍微摆弄了一下后，它起了作用！非常感谢！对于其他阅读的人，我创建了另一个名为postItems的数组，将我的文档数据推到其中，并在Promise func中，将我的posts状态设置为postItems。摆弄了一点后，它起了作用！Thanks太多了！对于其他正在阅读的人，我创建了另一个名为positems的数组，将我的文档数据推入其中，并在Promise func中，将我的posts状态设置为positems。