Не удалось объединить массив объектов реагировать нативный

Question

Я пытаюсь объединить данные в существующий массив объектов в состоянии. в console.log (data) я получаю данные, как и ожидалось, но они не объединяются с this.state.listData.

«реагировать-нативный»: «0.61.5», «реагировать-нативный-firebase / firestore»: «^ 6.3.4»,

retrieveMore = async () => {
        const { navigation }  = this.props;
        const title2 = navigation.getParam('title2', null);
        userEmail = firebase.auth().currentUser.email;
        try {

                const data = [];
                await database.collection("All Recipes").orderBy("reviewCount", "desc").startAfter(this.state.lastVisible).limit(this.state.limit).get().then(doc => {
                    doc.forEach( async (doc) =>{
                        const {filter, id , name, image} = doc.data();
                        lastVisible = doc;
                        let recipeId = doc.data().id;
                        let test = await database.collection("All Recipes").doc(recipeId).collection("Reviews").onSnapshot(function(querySnapshot) {
                            let data2 = [];
                            querySnapshot.forEach(function(doc) {
                                const { Rating } = doc.data();
                                data2.push({
                                    Rating: Rating,
                                });
                            });
                            const totalRating = data2.reduce((prev,next) => prev + next.Rating,0);
                            let averageRating = parseInt((Math.round(totalRating/data2.length * 100) / 100).toFixed(1));
                            let totalReview = Math.abs(data2.length) > 999 ? Math.sign(data2.length)*((Math.abs(data2.length)/1000).toFixed(1)) + 'k' : Math.sign(data2.length)*Math.abs(data2.length);

                            data.push({
                                filter: filter,
                                id:id,
                                name:name,
                                image:image,
                                averageRating: averageRating,
                                totalReview: totalReview,
                            });
                        });
                    });
                    console.log(data);
                    this.setState({
                      listData:[...this.state.listData, ...data],
                      lastVisible: lastVisible,
                      loading: false,
                    });
                })

        }
        catch (error) {
          console.log(error);
        }
      };

если я прокомментировал В коде, подобном приведенному ниже, данные и this.state.listData отлично сочетаются, но без AverageRating и totalReview.

const data = [];
                await database.collection("All Recipes").orderBy("reviewCount", "desc").startAfter(this.state.lastVisible).limit(this.state.limit).get().then(doc => {
                    doc.forEach( async (doc) =>{
                        const {filter, id , name, image} = doc.data();
                        lastVisible = doc;
                        let recipeId = doc.data().id;
                        // let test = await database.collection("All Recipes").doc(recipeId).collection("Reviews").onSnapshot(function(querySnapshot) {
                        //     let data2 = [];
                        //     querySnapshot.forEach(function(doc) {
                        //         const { Rating } = doc.data();
                        //         data2.push({
                        //          Rating: Rating,
                        //          });
                        //     });
                        //     const totalRating = data2.reduce((prev,next) => prev + next.Rating,0);
                        //  let averageRating = parseInt((Math.round(totalRating/data2.length * 100) / 100).toFixed(1));
                        //  let totalReview = Math.abs(data2.length) > 999 ? Math.sign(data2.length)*((Math.abs(data2.length)/1000).toFixed(1)) + 'k' : Math.sign(data2.length)*Math.abs(data2.length);

                            data.push({
                                filter: filter,
                                id:id,
                                name:name,
                                image:image,
                               //  averageRating: averageRating,
                                // totalReview: totalReview,
                            });
                        });
                    // });
                    console.log(data);
                    this.setState({
                      listData:[...this.state.listData, ...data],
                      lastVisible: lastVisible,
                      loading: false,
                    });
                })

Answer 1

this.setState(state=>({
    listData:[...state.listData, ...data],
    lastVisible: lastVisible,
    loading: false,
}));

попробуйте это может помочь вам