Question

在componentDidMount中的许诺链中，我最终设置了一个在构造函数中创建的数组（称为this.recentCards），以保存从Firebase查询中检索到的某些数据。然后，我将“正在加载”状态设置为false，以便我的渲染函数可以在正确加载数据后正确渲染数据。

但是，没有数据被渲染，我可以看到在渲染功能期间，在“ this.state.loading”为false的分支中，this.recentCards为空。这是没有意义的，因为this.recentCards在加载状态设置为false之前不为空。有人对这种相互作用如何发生有任何想法吗？我找不到任何线索。

这里有一些代码可供参考：注意：由于我在访问函数this.setState时遇到麻烦，并且将“ that”用作保存“ this”的变量，因此使用了that.setState中的“ that”

Promise.all(promises).then(function(results){     
     for(var i = 0; i < tagInfo.length; i++){
     tempArray.push(
     <FeedCard key = {(i + 1) * -1}
        handleToUpdate = {this.addView}
        mutual = {false}
        time = {tagInfo[i]["Time"]}
        restaurantid = {tagInfo[i]["Restaurant"]}
        isRestaurant = {tagInfo[i]["isRestaurant"]}
        dishid = {tagInfo[i]["Dish"]}
        userid = {tagInfo[i]["Author"]}/>
                );
              }
              this.recentCards = tempArray;
              that.setState({loading:false});

通话

 console.log(this.recentCards)

setState显示数组中的项之前。

但是，在此函数期间调用它不会返回任何项目：并且只有在将加载设置为false时才调用此函数。

showCards = () =>{
    console.log(this.recentCards);
    console.log(this.state.loading);
    if(this.state.empty == true){
      return(
        <View style = {{flex:1, justifyContent:'center', alignItems:'center', backgroundColor:'#F7F6F4'}}>
          <Text>{"No tag activity yet! You can start tagging on the Discover page!"}</Text>
        </View>
      );
    }
    else{
      return(
        <View style = {styles.contentContainer}>
          {this.recentCards}
        </View>
      );
    }
  }

Answer 1

您不能将{this.recentCards}更改为this.state.recentCards吗？ this.recentCards的值永远不会“刷新”，因此只会取初始值。

在您的构造函数中：

this.state = {
 ..// state items
 recentCards : <some initial value>
}

在您的函数中：

Promise.all(promises).then(function(results){     
 for(var i = 0; i < tagInfo.length; i++){
 tempArray.push(
 <FeedCard key = {(i + 1) * -1}
    handleToUpdate = {this.addView}
    mutual = {false}
    time = {tagInfo[i]["Time"]}
    restaurantid = {tagInfo[i]["Restaurant"]}
    isRestaurant = {tagInfo[i]["isRestaurant"]}
    dishid = {tagInfo[i]["Dish"]}
    userid = {tagInfo[i]["Author"]}/>
            );
          }
    that.setState({loading:false, recentCards : tempArray});

在渲染中：

showCards = () =>{
console.log(this.recentCards);
console.log(this.state.loading);
if(this.state.empty == true){
  return(
    <View style = {{flex:1, justifyContent:'center', alignItems:'center', backgroundColor:'#F7F6F4'}}>
      <Text>{"No tag activity yet! You can start tagging on the Discover page!"}</Text>
    </View>
  );
}
else{
  return(
    <View style = {styles.contentContainer}>
      {this.state.recentCards}
    </View>
  );
}

}

使用组件变量反应本机承诺和componentDidMount行为

1 个答案: