일단 모든 데이터가 배열로 푸시 된 상태로 설정합니다.

Question

Firestore에서 Firestore와 연결하여 'facebook kind of newsfeed'를 만들려고합니다. componentDidMount에서 먼저 friendslist를 얻고 친구들마다 빈 배열에 push하고 sort() + reverse()에 타임 스탬프 인 ID를 보냅니다. 이렇게하면 가장 최근 활동이 배열에서 첫 번째가됩니다. ALL 항목을 배열로 밀어 넣으면 배열로 상태를 설정하려고합니다.

import React, { Component } from 'react' 
import { db, firebaseAuth } from '../../helpers/base' 
import Activities from './Activities' 

export default class ActivityList extends Component { 
    state = { 
    activityKeys: [], 
    } 

    componentDidMount(){ 
    const uid = firebaseAuth().currentUser.uid 
    var activityKeys = [] 

    db.doc(`users/${uid}/social/friends`).get().then((doc) => {  
     //GET ALL THE FRIENDS 
     const friends = doc.data() //OBJECT OF {friendOneId: "friendOneId", friendTwoId: "friendTwoId"} 

     //LOOP THROUGH FRIENDS AND GET ACTIVITY  
     Object.keys(friends).forEach(friend => {   
     db.collection("activity").where("user", "==", friend).get().then((querySnapshot) => { 
      querySnapshot.forEach((doc) => { 

      const activity = doc.id 
      activityKeys.push(activity) 
      activityKeys.sort().reverse()     
      })      
     })   
     }) 
    })  
    console.log('activityKeys: ', activityKeys) 
    this.setState({ activityKeys })        
    } 

render() { 
    return (
    <div> 
     <h5>Activity List</h5> 
     <Activities activityKeys={this.state.activityKeys} />   
    </div> 
    ) 
    } 
} 

문제는 배열이 정확하지 않은 것 또는 모든 항목이 밀려 전에 아마 설정되어 있는지 : 이것은 내가 가지고있는 코드입니다. 이 로그는 내가받는 로그입니다.

로드 된 것처럼 보이지만 대괄호 안에는 비어 있습니다. 만약 내가 console.log This.state.activity 같은 결과를 얻을. 누군가이 문제를 해결할 수있는 방법을 말해 줄 수 있습니까? 그리고 일단 모든 활동이 빈 배열로 푸시되면 어떻게 setState를 할 수 있습니까?

Answer 1

API 호출시 Promise를 받지만 호출이 완료되기 전에 this.setState({ activityKeys })을 설정합니다. 즉, 이라고하는 데이터를받은 후에 다른 .then()을 연결해야합니다. 조금 어렵게 만드는 이유는 각 반복에 대해 반복 할 때 많은 약속을 작성하고 각 약속이 완료 될 때까지 기다릴 필요가 있다는 것입니다. 목록에 모두 저장할 수 있으며 Promise.all을 사용하여 완료 될 때까지 기다렸다가 이전 .then에서 반환 할 수 있습니다. 약속 내용에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise