Реагируйте на собственные обещания и поведение componentDidMount с переменной компонента

Question

В длинной цепочке обещаний в componentDidMount я в конечном итоге установил массив, созданный в конструкторе (называемый this.recentCards), для хранения некоторых данных, полученных из запроса firebase. После этого я установил для состояния загрузки значение false, чтобы моя функция рендеринга могла правильно отображать данные после их правильной загрузки.

Однако данные не отображаются, и я вижу, что во время функции рендеринга в ветви, где «this.state.loading» имеет значение false, this.recentCards пуст. Это не имеет смысла, так как this.recentCards НЕ пусто до того, как состояние загрузки установлено в false. Кто-нибудь имеет представление о том, как происходит это взаимодействие? Я не могу найти потенциальных клиентов.

Вот некоторый код для справки: ПРИМЕЧАНИЕ: «that» в that.setState используется, так как у меня возникли проблемы с доступом к функции this.setState, и я использовал «that» в качестве переменной, содержащей «this»

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

}