react redux dva 多次循環異步取數據的問題解決 - w2xh－IT工程師數位筆記本

文章出處

目的：根據查到的子分類，將其父分類也查出來，放入其中。

使用方法：將子分類中的父分類字段去重后放入par_arr，然后遍歷par_arr去取父分類，再將結果插入子分類的集合中。

問題：console.log(res);的結果中包含了父分類，但組件未重新渲染。

未解決之前的代碼：

services / filter.js

import request from '../utils/request';

function getOne(id){
	return request('/api/categories/'+id);
};

export function fetch(){
bardata = request('/api/categories').then(res=>{
            //將父分類去重，放入par_arr
            var par_obj={};
            var par_arr=[];
            res.data.map(d=>{
                let _par=d.parent;
                if(!par_obj[_par] && _par!=0){
                    par_obj[_par]=1;
                    par_arr.push(d.parent);
                }
            });

            //根據par_arr獲取父分類數據
            Promise.all(par_arr.map(id=>getOne(id))).then(res1=>{
                res1.map(item=>{
                    res.data.push(item.data);
                })
            });
            console.log(res);
            return res;
        })

        return bardata;
}

解決方法是：不要返回res變量，直接返回Promise.all()，即可在執行完之后再返回。

我之前都陷入在如何使res變量更新的死胡同里了。

解決后的代碼：

import request from '../utils/request';

function getOne(id){
	return request('/api/categories/'+id);
};

export function fetch({id}){
	if(id === 0){
		return request('/api/categories').then(res=>{
			
			//去重得到父分類數組
			var par_obj={};
			var par_arr=[];
			res.data.map(d=>{
				let _par=d.parent;
				if(!par_obj[_par] && _par!=0){
					par_obj[_par]=1;
					par_arr.push(d.parent);
				}
			});

			//根據父分類數組去取父分類數據，加入子分類中
			return Promise.all(par_arr.map(id=>getOne(id))).then(res1=>{
				var res1Data_arr=[];
				res1.map(item=>{
					res1Data_arr.push(item.data);
				});
				res.data = res.data.concat(res1Data_arr);	
				return res;
			});
		})
		
	}else{
		return getOne(id);